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 failed promise of Web Components – Lea Verou
A spot-on summary of where we’ve ended up with web components.
Web Components had so much potential to empower HTML to do more, and make web development more accessible to non-programmers and easier for programmers.
But then…
Somewhere along the way, the space got flooded by JS frameworks aficionados, who revel in complex APIs, overengineered build processes and dependency graphs that look like the roots of a banyan tree.
Alas, that’s true. Lea wonders how this can be fixed:
I’m not sure if this is a design issue, or a documentation issue.
I worry that is a cultural issue.
Using a custom element from the directory often needs to be preceded by a ritual of npm flugelhorn, import clownshoes, build quux, all completely unapologetically because “here is my truckload of dependencies, yeah, what”.
Responses
Related links
How Microsoft Edge Is Replacing React With Web Components - The New Stack
“And so what we did is we started looking at, internally, all of the places where we’re using web technology — so all of our internal web UIs — and realized that they were just really unacceptably slow.”
Why were they slow? The answer: React.
“We realized that our performance, especially on low-end machines, was really terrible — and that was because we had adopted this React framework, and we had used React in probably one of the worst ways possible.”
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!
Related posts
Trust
I’m trying to understand why developers would trust third-party code more than a native browser feature.
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
Schooltijd
Going back to school in Amsterdam.
Control
Trying to understand a different mindset to mine.
Accessibility testing
It’s not just about finding the issues—it’s about finding the issues at the right time.
2 Likes
# Liked by Aaron Parecki on Thursday, September 24th, 2020 at 6:32pm
# Liked by Zachary Dunn on Friday, September 25th, 2020 at 1:28pm