Code and demo in CodeSandbox for making a Web Component using vanilla JS.

There are also many libraries out there that help make building Web Components easier. They handle most of the complexity associated with data bindings and event listeners. Many libraries also offer additional lifecycle methods available with the standard Web Component specifications to give you more control over your Web Component.

Here are a few of the libraries:

LitElement: Developed by Google folks, this library uses lit-html to render into the element’s Shadow DOM and also provides an API to help manage element properties, attributes and lifecycles. It also loads polyfills to support natively unsupported browsers for web components such as IE11 and Edge.

StencilJS: Built by the Ionic framework team, this library allows you to write your web components with JSX as well as an API to help manage element properties, attributes and lifecycles. It also loads polyfills to support IE11 and Edge.

Hybrids: Unlike the two libraries above, Hybrids uses plain objects and pure functions syntax over classes syntax when composing web components. It also uses polyfills to support IE11 and Edge.

Web Components and Accessibility

Any elements rendered on the Shadow DOM is accessible by assistive technologies because it is also included in the accessibility tree. There are a few things to keep in mind to ensure that your custom components will be fully accessible.

Let’s take the built-in element button as an example. The buttonelement has built-in accessibility for things like keyboard interaction and highlighted focus because it has an implicit role of “button”. However, if you decide to make a Web Component that acts like a button but not use the built-in element button you will have to make sure that you include information like role, aria-labels, tab-index, keyboard interactions in your element. There is a very good article by Rob Dodson on ‘The future of accessibility for custom elements’. He proposes the use of the Accessibility Object Model for defining a custom element’s semantics directly in the accessibility tree.

In Part 2 of this blog, I will be using LitElement to demonstrate how to build a Web Components library and will be talking about how to integrate them into a React app and an Angular App. Stay tuned!

Sign up for our newsletter