Intro to Web Components

Introduction

Web Components are a recent phenomenon that are slowly replacing JavaScript Frameworks and may be the future of web development. Web components are a set of web platform API’s that allow developers to create reusable HTML code. That code can then be used with other projects using any framework or web standards.
There are four main technologies that are part of Web Components. Those technologies are:
• Custom Elements- used to define elements that were created by the user.
• Shadow DOM- used to encapsulate HTML elements and can hide code from the rest of the DOM to prevent conflicting code from clashing.
• HTML Templates- used to add HTML elements to the DOM. Also allows you to reuse/clone elements inside the DOM.
• ES Modules- imports data like objects, functions, and variables from JavaScript files.
In this article we will go over how Web Components can improve accessibility, future proof development, and list some of the companies that use them

Accessibility

Accessibility is an important part of web design because if it is done right then anyone will be able to access and use your website despite any physical impairments. One way to improve the accessibility of your site through web components is by creating custom elements. With custom elements you can alter or change things about your site to make it more accessible. They allow you to create features designed to help people who are disabled. However custom elements don't inherently come with accessibility to things like keyboards so those will need to be added in. Another way is by extending or changing native elements through an HTML interface. Native elements are already designed to be completely accessible, but sometimes it is necessary to change things about them to improve the overall accessibility of the website. Custom elements do not come or initially have semantics or things like that so it would sometimes be easier to extend or customize the behavior of pre-existing elements.

Future Proof

Future proof means that the technology or software will not have to be drastically updated as new technology comes out and as standards change. Future proofing helps things withstand the passage of time and web components so far seem to be future proofed. This is because web components are not based on a specific front-end framework. JS Frameworks which is what web components could replace require specific frameworks in order to be able to work, but web components can work on any framework old or new. Front end frameworks constantly change, and new ones are always being created making the previous ones obsolete. However, since Web components do not rely upon specific frameworks they will never need to be updated or replaced.