Learning how to extend web components

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.


lit-html: An efficient, expressive, extensible HTML templating library for JavaScript

lit-html lets you write HTML templates in JavaScript, then efficiently render and re-render those templates together with data to create and update DOM.


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: