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
Link tags: customelements
37
Liskov’s Gun: The parallel evolution of React and Web Components – Baldur Bjarnason
React has become a bloated carcass of false promises, misleading claims, and unending layers of backwards compatibility – the wrong kind of backwards compatibility, as they still occasionally break your fucking code when updating.
Pretty much anything else is a better tool for pretty much any web development task.
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!
PodRocket - A web development podcast from LogRocket: HTML web components with Chris Ferdinandi
I somehow missed this when it came out in January but Amber just pointed me to it—an interview with Chris about HTML web components, available for your huffduffing pleasure.
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.
daviddarnes/play-button: A Web Component to play audio or video with a button
Isn’t this a lovely little HTML web component? All it does is hook up a button element with an audio or video element: exactly the kind of discrete drudge work that’s good to automate away.
drab
This looks like a handy collection of HTML web components for common interface patterns.
drab does not use the shadow DOM, so you can style content within these elements as usual with CSS.
HTML Web Components on the Server Are Great | Scott Jehl, Web Designer/Developer
Scott has written a perfect description of HTML web components:
They are custom elements that
- are not empty, and instead contain functional HTML from the start,
- receive some amount of progressive enhancement using the Web Components JavaScript lifecycle, and
- do not rely on that JavaScript to run for their basic content or functionality.
These are my jams · Paul Robert Lloyd
I like how Paul has recreated his own version of This Is My Jam and I really like how he’s done it with an HTML web component.
Light-DOM-Only Web Components are Sweet – Frontend Masters Boost
The main reason I’m so hot on Light DOM is that I find the styling story of Web Components using Shadow DOM annoying.
An Image Dialog Web Component
Here’s an HTML web component that uses progressive enhancement for a very common use case: clicking a thumbnail image to view the full size image in an overlay. Just be sure to update the code to include an alt attribute before using this in production!
Extending Responsive Video with HTML Web Components | Scott Jehl, Web Designer/Developer
Scott gives a thorough step-by-step walkthrough of building an HTML web component, in this case for responsive video:
In this post, I’m going to talk briefly about responsive video, but most of the post will be about using HTML web components to extend native video behavior in very helpful ways. But even if you’re not particularly interested in video development, stick around as I’ll demonstrate how to build an HTML Web Component to progressively enhance anything you need.
HTML Web Components Are Having a Moment – Cloud Four
I suspect that in a few years’ time, we’ll look back at this month, and especially Jeremy and Eric’s articles as an inflection point. Similar to how Ethan managed to make responsive web design accessible to more people, I think we’re looking at the same thing happening right now for web components.
A great summary (with links) of all the recent buzz around HTML web components:
I don’t know about you, but I read every one of those articles, and for the first time, web components “clicked” for me. Suddenly, I understood how they could fit into our workflow, and where they’d be a good addition. I was excited about web components in a way I’d never been before.
The elevator pitch for Web Components | Go Make Things
I’ve worked with Web Components a little bit over the last few, but really struggled to understand the use case for them.
Until this week.
Between Jeremy Keith’s article on HTML Web Components, plus using one for a client project with NASA, something just clicked in my brain finally.
I’m now convinced that they’re the best way to author DOM manipulation libraries.
Shadow DOM is for hiding your shame
This is an excellent step-by-step walkthrough by Tess of creating a web component, with real thought given to what should be in the HTML (which will act as a fallback) and what’s better generated in the Shadow DOM (like buttons for interactivity).
This perfectly mirrors something Chris was saying in a recent episode of the Shop Talk Show:
I think of the image comparison one. That’s a classic example in Web component. What’s inside is just two IMG tags. That’s it. When it fails, you don’t want a weird div with little arrows on it being rendered on the page. That’s not doing anything because it has failed to load the JavaScript.
An example of an HTML Web Component | Go Make Things
Another example of an HTML web component from Chris, who concludes:
Web Components are rapidly becoming my preferred way to add progressive enhancement to HTML elements.
An Attempted Taxonomy of Web Components—zachleat.com
Zach lists out the HTML web components he has created:
All of the components above use progressive enhancement and fallback to the nested HTML content before/without JavaScript—the crux of the humble HTML Web Component.
HTML Web Components | Go Make Things
Chris walks through a really good example of an HTML web component he made for NASA: wrapping a regular form element in a custom element to add Ajax functionality.
This approach let me slash the JavaScript used for this project in half, easily progressively enhance the UI, and provide an authoring approach that’s much easier to read and make sense of.