Web components is actually a broad term for couple of specifications that are built into modern browsers that make up the web components.
Custom HTML element is just one part of that specification
It is arguably the most important one because this defines a couple of features
However this alone will not give you great web components.
Another important specification that makes up the web components term is the shadow dom specification. Shadow DOM is all about having a separate DOM of tree of DOM nodes behind your custom elements that is separated from your normal dom.This helps you for example for scoping your styles to
the custom element. So that styling that you set up for your web components does not interfere with other parts of the application
Templates and Slots is another part of the specification
So you basically define a template which is then rendered as a Shadow DOM and slots allow us to pass dynamic content into our web components. So that developers using those components can use them and their set of features
that are baked in.
Lets finally wrap up with the article by the last specification of Web Components.
Another specification is the HTML Imports Specification
That was meant to be a feature to allow importing of HTML files into HTML
files so that you can define these templates for the components in HTML files which are then imported dynamically.
In next part of the series, we will discuss more about Web Components.
Follow me on:
👉 Twitter: https://twitter.com/thenerdydev