Web components are components that use four standard web specifications, which are supported by the recent versions of the major browsers:
Custom Elements
These components are defined as custom HTML elements and behave like HTML tags. For example, to use a custom element that adds more robust features to your video you can wrap the <a11y-media-player> tag around your <video> tags.
Just like native HTML elements, custom elements can have attributes, properties, events, and methods.
HTML Templates
When you use a web component, a copy of the component’s template is inserted inside the tag. This template includes more complex HTML and styles which can be customized by the attributes and properties you set, by methods you invoke, or by certain events on the page. This template is hidden inside a special area called shadow DOM. The template may include slots, placeholders for the content you place inside the tag to allow even more customization.
Shadow DOM
Unlike Javascript libraries like Bootstrap, you don’t have to worry about your CSS accidentally affecting elements or the elements’ CSS affecting the rest of your page. That’s because Bootstrap used the HTML put on your page, which is what we cal light DOM. A web component’s content is attached to the page in a special area called light DOM, which prevents CSS from reaching its template. Anything you write inside a custom element tag lives in a slot, a window from shadow DOM into light DOM.
ES Modules
We can use web components because all of their parts (tag, attributes, properties, events, methods, templates, slots, and styles) are packaged in javascript class that can be imported as a module. That means all we have to do is include the module JavaScript to our page to teach the browser what to do with our custom-element tag.
To learn more check out the Introduction to Web Components (PSU Web Pros 2020) slide deck.