What are Web Components?

Web Components are a set of APIs that allow you to create custom HTML tags and use them alongside standard tags. They provide many advantages such as portability across projects, encapsulation of state, and access to a shadow DOM. Web Components are also functionally independent from frontend frameworks. You can use your components in a React, Angular, Vue, or vanilla project. For example, let’s say you wanted to create a simple feed of photos with related titles in a React app. Instead of writing some typical JSX like this:

photos.map(photo => {
  return (
    <div className="photo">…