Everything You Need to Know About Web Components: Part 1
By: Amy Wah
The Custom Element API allows you to define new HTML tags with associated templates, styling and logic. The styling can be encapsulated using the Shadow DOM which makes your component ignore any styles applied outside of it.
If you are interested in getting more in-depth on the four features that Web Components leverage from browsers, I would recommend that you read the latest from webcomponents.org.
Benefits of Web Components
These are just a few of the key benefits that explain the growing popularity of Web Components.
Will it work in any browser?
The short answer is yes, with the appropriate polyfills. Evergreen browsers such as Chrome, Firefox and Safari support most features natively. Edge is currently in the process of building native support for Web Components.
However, there is a bit of a caveat in Safari: autonomous custom elements(custom elements extending
HTMLElement) will work but not customized built-in elements (custom elements extending built-in elements such as
HTMLButtonElement), but the good news is customized built-in elements will work in Safari with an appropriate polyfill like document-register-element.
Below is the break down of what major browsers support Web Components.
Web Component support in major browsers.
How do you build a Web Component?
Code and demo in Codepen 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!