TL;DR The introduction of Web Components have given developers super powers. With Web Components, web designers and developers are no longer limited to the existing HTML tags that existing browser vendors provide. Developers now have the ability to create new custom HTML tags, enhance existing HTML tags or extend components that developers around the world have created. In this article, I’ll show you how to use and create custom web components for your apps.
Web components allow for reusability and the ability to associate JS behaviour with your markup. Developers can search for existing components created by other developers on the web components registry. In the absence of suitable existing custom elements, developers can create theirs and make it available for others by publishing it to the registry.
What are Web Components?
There are some sets of rules and specifications that you need to follow to develop web components. These specifications are classified into four categories:
- Custom Elements
- Shadow DOM
- HTML Imports
- HTML Template
We’ll talk about these specifications in the latter part of this post. But let’s quickly learn how to use web components.