Web Components are a newly supported standard. They’re a great match for Design Systems because they’re futureproof and work with any framework. Building proper UI Web Components can be quite a task though, especially if you want them to be accessible. By Erik Kroes.
The article does a great job of explaining what Web Components are and how to use them with accessibility in mind.
Web Components are a set of standards:
- Custom Elements: A way to create your own HTML elements
- ES Modules: Self-contained modules of JavaScript code that can be reused and extended
- HTML Templates: Reusable fragments of DOM
- Shadow DOM: Encapsulation of DOM
Together these standards enable “Reusable extendable encapsulated self-contained components for the web”. That’s quite a mouthful, but not very clear.
In practice, this means you can create your own HTML elements. These elements have their own bit of encapsulated DOM. In this, and many web-related cases, DOM stands for Document Object Model. …It means the HTML element you make can’t be touched or influenced by whatever is outside of the element. They can’t be accidentally styled, and they won’t mess with your global styles either. And because it’s an ES Module, the whole element can be distributed and extended. All these aspects together make up a Web Component.
You will also get code examples, explanation what is shadow DOM, and light DOM, overview of aspects that need special attention when creating an accessible user interface control, what are accessible UI components and plenty of links to further reading. Great job!
[Read More]