What are Web Components (and why would you use them)?

[zool]

I like them for the encapsulation of the dom style and script.. and the fact it works even when the elements are made dynamically without any form of listeners to the dom or functions that
have to be run.
one thing i kind of like is the fact (but you have to keep in mind) that the css in the shadow dom can still have an effect outside the component.

in one case i used it with a lightbox where i used body:has(light-box[open]) would turn of the scrolling and made sure whenever the lightbox was visible it would have the attribute open.
the lightbox itself is a dialog inside the component that was set to display:contents. and always made sure when created that the body is the parent.
this way the dialog was inside the shadowdom.

[flemminghansen]

Another benefit of web components is that you can control how and when they update - meaning async updates are really easy to handle. Also, once the component is defined, you can use it anywhere in your app without imports. And it doesn't care what framework is beneath it, since Web Components are agnostic. I've made site wide changes with web components on one of our legacy apps that used Pug and React, and I did it in less than a couple of hours.