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.
Conversational Semantics · An A List Apart Article
I love, love, love all the little details of HTML that Aaron offers up here. And I really like how he positions non-visual user-agents like searchbots, screen readers, and voice assisants as headless UIs.
HTML is a truly robust and expressive language that is often overlooked and undervalued, but it has the incredible potential to nurture conversations with our users without requiring a lot of effort on our part. Simply taking the time to code web pages well will enable our sites to speak to our customers like they speak to each other. Thinking about how our sites are experienced as headless interfaces now will set the stage for more natural interactions between the real world and the digital one.
Related links
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.
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.
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.
Related posts
Displaying HTML web components
You might want to use `display: contents` …maybe.
Pickin’ dates
HTML web components for augmenting date inputs.
button invoketarget=”share”
An alternate route to a declarative version of the Web Share API.
Lost in calculation
A lazy option for responsive images is at hand.
Button types
Ideas for some declarative shortcuts.