Composition with the Shadow DOM is more powerful than you think. You can do a lot with the default named slot assignment, but manual slot assignment is a pathway to many abilities some consider to be… unnatural.</emperor-palpatine>

https://knowler.dev/blog/an-intro-to-manual-slot-assignment

Web Components: Working With Shadow DOM, by @smashingmag:

https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/

Public CSS Custom Properties in the Shadow DOM, by @michaelwarren.dev:

https://michaelwarren.dev/blog/css-variables-in-wc/

#Development #Guides
Public CSS variables in the shadow DOM · How to expose them in web components https://ilo.im/165h87

_____
#CustomProperties #WebComponents #ShadowDOM #API #Accessibility #WebDev #Frontend #CSS #JavaScript

After a long while tinkering with smaller and smaller ways to build re-usable pieces of HTML, I've landed on something that is simple, and uses the browsers built-in abilities to upgrade elements.

Introducing "ShadowRoot Injector"
https://github.com/Tram-One/shadowroot-injector

ShadowRoot Injector is a way to declaratively define HTML, that will automatically insert when custom elements appear in the DOM.

Check out the link and examples, and let me know what y'all think!
#WebComponents #HTML #ShadowDOM #WebDev

#WebComponents people, in this Codepen that I set up for testing, the dialog inside the #ShadowDOM cannot be open by its sibling button even enough they're connected by correct ID attribute.
Is this expected or am I missing something here?

https://codepen.io/brandonzhang/pen/QwwXXmL

#Development #Pitfalls
All browsers get this wrong · What DevTools misinterpret about Shadow DOM https://ilo.im/163dax

_____
#Bugs #Specification #WebComponents #ShadowDOM #DevTools #Browser #WebDev #Frontend #DOM #CSS

New Kitten release

• Now leaves <style> tags within <template> tags alone when collating and normalising the CSS on a page so as not to interfere with scoped styles in declarative shadow DOM.

(Kitten’s Streaming HTML workflow¹ – which uses htmx and WebSockets under the hood – combined with built-in support for slots, etc., in Kitten components² means the use of declarative shadow DOM is mostly useful if you want scoped styles. Ideally, of course, use classes to scope styles to your components and be specific in your CSS selectors in general so as not to pollute elements in your components. Although that’s a bit like saying you should floss everyday. Yeah, we all know we should…) :)

Update: All that said, I’d highly recommend you don’t use Shadow DOM in your Kitten apps. For one thing, htmx’s WebSocket extension doesn’t seem to play well with it. And for another, you really don’t need it and definitely not just to get scoped CSS.

Enjoy!

¹ https://kitten.small-web.org/tutorials/streaming-html/
² https://kitten.small-web.org/tutorials/components-and-fragments/

In that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:

https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/

Catch up on some techniques for managing connection time work in a custom element. There's even reasons for using shadow DOM hidden in there.

Thanks @nachtfunke for starting the convo on this and @zachleat for challenging a toot into a full on blog dump.

https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2627222385

Call to action for #WebComponent / #ShadowDOM fans: I've added an experimental flag to Firefox lifting the restriction on adoptedStyleSheets, meaning shadowroots can adopt `link.sheet` or `style.sheet`.

Please try this out, and let me know if you encounter issues!

I think #CSS vars are good enough for bridging styles from a page into it's #webComponents' #shadowDOM

I’ve never had stress around putting all my #CSS for all of my #webComponent in their #shadowDOM… ask me anything.

Hi #webComponents friends, new and old!

So many of you in recent days, was there some kind of drama?

Thing won't always be this exciting, but I hope together we make make the web a little better place.

At times that might mean participating in the #webComponentsCG. Come hang out: https://github.com/w3c/webcomponents-cg

Others will just be sharing ideas about #webDev #shadowDOM #CSS #customElements #w3c, etc.

What about you? What are you working on/learning about? Let people know in the thread!