What are web components?

Web components are sets of application programming interfaces that allow users to create custom and reusable HTML tags in web pages and web apps. By using web components one can improve accessibility and help future proof development/improve transparency. Web components get their own Shadow DOM (Document Object Model), which is a set of Javascript application programming interfaces that provide the purpose of attaching encapsulated elements while also controlling functionality of said components. This aspect is kept separate from the main DOM, also known as the light DOM, in order to help keep the main clean which helps with the readability of the code.

How web components improve accessibility:

• Full control over web components so we can define/extend built in functionality
• Instead of using standard button you can define an extension of that and then use that custom design repeatedly
• For example, instead of using standard button you can define a custom button that has all of the accessibility definitions embedded in it, and use that custom design repeatedly

How web components help future proof development / improve transparency:

• Stable and predictable lifetime – no upgrade traps, no breaking changes
• They are based on official web standards
• Easy to learn and use
• Reusability makes easier in import and export

Examples of who’s using web components:

• EA SPORTS
• Comcast
• Byu
• Youtube
• Nintendo
• Nintendo has elements imported through the use of scripts

Why using web component approach is important

• Reusability
• Separate teams can focus on individual web components
• Each sub team will only have to worry about their specific component concerns
• Can manage organization better to work more efficiently

Helpful sources I found beneficial for understanding web components more in depth:

1. https://www.proudcommerce.com/web-components/why-you-should-use-webcomponents-now
2. https://www.w3schools.com/TAGs/
3. https://www.24a11y.com/2019/web-components-and-the-aom/
4. https://developer.mozilla.org/en-US/docs/Web/Web_Components

Walk through video displaying websites with implemented web components:

Link