Web Components

Web Components have been stirring a quiet revolution in front-end development. Wrapped in a mysterious entity called 'the Shadow DOM' - what exactly does that mean?

It is not that difficult to understand.? Imagine a bread making machine. It has a group of functions that vary according to what you are making, but the essential controls direct the mixing device that kneads the dough, the heating element that cooks the loaf and ingredient release triggers that combine the yeast at the right moment. It is a group of components which together comprise a more complex machine.? Each component may have qualities that are unique to it, you do not want the heating element's properties to affect the yeast release mechanism or the movement of the mixing device to move the heating element.?

These unique properties in a web component could be div containers, or CSS settings. These settings can define a button, for example, what it looks like, its colour and events and how these colours may respond to various events.? You can hide these qualities in the 'Shadow DOM' of the component.? It is a self contained component, its settings are contained, private and its concerns are hidden from other components.

Think of Web Components like vehicles on the road.? Each contains a set of functionalities and yet can look different and carry different kinds of load. How do you make an effective highway with lots of different types of vehicles? By making the vehicles from the same principles, but allowing for variations by specifying attributes.? Web Components work like that.

The Shadow DOM prevents components from messing with each other.? The Shadow DOM is implemented in most browsers (excluding IE and Opera Mini).? Web Components are an extremely powerful tool for making content that has functionality, consistent design and most importantly, they can be reused.? A single webpage could have multiple instances of one or more components.? They implement new tags into and make HTML into an extensible language.??

Web Components can be implemented in Vanilla JS but using the 'lit' library makes more sense, it runs in the browser (the lit modules are a library, they do not require transpilation), is fast and more important, clarity helps make it easier to maintain. Or, they can be written using Typescript (that does require transpilation).