What are web components?
Web components are based on four specifications:
- Custom Elements
- Shadow DOM
- ES Modules
- HTML Template
Browser support has been increasing over the years and has risen to over 85% and those browsers that implement native custom elements also support ES6. For those browsers that do not support it, you can simply use a polyfill:
Ways to start implementing custom elements
I’ve been a fan of the Polymer project which is a great resource and has been a pioneer in custom elements and tools to help you develop them. The next-generation suite of tools that have been recently announced by this project is fairly exciting to explore, called LitElement and lit-html.
LitElement: A simple base class for creating fast, lightweight web components
LitElement makes it easy to define Web Components – ideal for sharing elements across your organization or building a UI design system.https://lit-element.polymer-project.org/
Sharing elements across projects and the organization
The beauty of web components is that it lets you extend HTML and can interoperate with other libraries, tools and frameworks. It can be especially useful for composing your own sets of UI elements to share amongst design systems.
You can use custom elements anywhere you can use HTML; in your main document, in a CMS or in markdown. They can also be easily imported into other frameworks like React or Vue and you can mix-and-match these elements with other types of components.
Here are a few additional resources to help you get started with extending native HTML elements to create your own set of web components:
- Preact (extending component)
- hyperHTML-Element – (docs on components)