You can use Web Components without the shadow DOM
So what are the advantages of the Custom Elements API if you’re not going to use the Shadow DOM alongside it?
- Obvious Markup
- Instantiation is More Consistent
- They’re Progressive Enhancement Friendly
The Web Component Success Story | jakelazaroff.com
The power of interoperability:
Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write them!
What web components will do — at least, I hope — is let us collectively build a rich ecosystem of dynamic components that work with any web stack. No more silos. That’s the web component success story.
Related links
HTML Web Components Can Have a Little Shadow DOM, As A Treat | Scott Jehl, Web Designer/Developer
This is an interesting thought from Scott: using Shadow DOM in HTML web components but only as a way of providing sort-of user-agent styles:
providing some default, low-specificity styles for our slotted light-dom HTML elements while allowing them to be easily overridden.
But what about the shadow DOM? | Go Make Things
So many of the problems and challenges of working with Web Components just fall away when you ditch the shadow DOM and use them as a light wrapper for progressive enhancement.
Web Components from early 2024 · Chris Burnell
Some lovely HTML web components—perfect for progressive enhancement!
A microdata enhanced HTML Webcomponent for Leaflet | k-nut — Blog
Here’s a nice HTML web component that uses structured data in the markup to populate a Leaflet map.
Personally I’d probably use microformats rather than microdata, but the princple is the same: progressive enhancement from plain old HTML to an interactive map.
Related posts
Extensible web components
Web components are supposed to extend the web, not replace it.
Manual ’till it hurts
Try writing your HTML in HTML, your CSS in CSS, and your JavaScript in JavaScript.
Schooltijd
Going back to school in Amsterdam.
Switching costs
The enshittification of React …which was already pretty shitty for users.
button invoketarget=”share”
An alternate route to a declarative version of the Web Share API.