DEV Community

The Nerdy Dev
The Nerdy Dev

Posted on

What are Web Components ?

What are Web Components ?

Alt Text

Web components are really your own custom HTML elements. HTML elements that are not built into the browser but they are created by you as a developer or by some other developer and you are using that in your project. Such a web component behind the scenes uses Javascript and they are reusable just like components that are made in Javascript Frameworks like Angular, React and Vue and can be used in any application for that matter.

Why Web Components ?

Difference between the existing approach and the Web Components<br>


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 
that modern browsers expose to you and you can use these features in javascript then.These features allow us to register our own HTML tags and define some basic logic behind it. 
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 
Your custom element in the end will be a combination of default HTML elements. Because in the end browser only knows how to handle the default HTML elements. But you can compose them, add styling and add javascript logic to create more powerful widgets like a modal as an example. Here you define the core structure behind your elements. 

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:

Discussion (2)

dannyengelman profile image
Danny Engelman

Alas HTML Imports is no longer part of the WC standard

thenerdydev profile image
The Nerdy Dev Author

I got 2 update the article. Thanks for letting me know that, Danny :)