An excellent overview of the current state of web components, including suggestions on how they could be improved.
On the current popularity (and success) of web components:
In August 2023, Chrome Platform Status reports that 19.4% of page loads in Google Chrome were using a web component (via theCustomElementRegistryDefinekey). For comparison<img loading>
On the simplest form of web component, a Custom Element (or HTML Web Component):
Custom Elements allow you to attach a JavaScript class to any custom element you define on your page, to add behaviors and JavaScript-generated content to any element instances on the page.
On the downside to Custom Elements (not very DRY):
Multiple instances of the same component need to repeat the same nested content and any changes to nested content need to be applied manually to all instances.
On the Shadow DOM, the next step up in terms of complexity:
Shadow DOM is the next level of our web components evolution. It solves the developer experience problem with repetition in authoring markup at the expense of clientside rendering 😭.
On how Declarative Shadow DOM is just several Custom Elements in a trench coat:
[Declarative Shadow DOM] solves the clientside rendering dependency for Shadow DOM but at the expense of repetition in authoring markup! The ol’ switcheroo (in some ways) feels like a de-evolution back to the approach we discussed in Custom Elements!
