#Development #Templates
Web component starter template · The essentials to ship production-ready components https://ilo.im/169jml
_____
#WebComponents #CustomElements #Accessibility #ProgressiveEnhancement #Encapsulation #ShadowDOM #Testing #Npm #WebDev #Frontend
Targeting by Reference in the Shadow DOM, by @Meyerweb:
https://meyerweb.com/eric/thoughts/2025/12/19/targeting-by-reference-in-the-shadow-dom/
Web Backstories: Shadow DOM, by @adactio and @Jayhoffmann (@igalia):
https://www.youtube.com/watch?v=GJlhzxVftCk
#podcasts #interviews #shadowdom #webcomponents #standards #history
Referencing HTML Elements Inside Shadow DOM, by @mehm8128 (@matuzo):
Awesome new #adoptedStyleSheets features in @Chrome #canary. 😲
#Development #Guides
Easier than expected · Testing HTML light DOM web components https://ilo.im/168ims
_____
#Testing #HtmlWebComponents #WebComponents #LightDOM #ShadowDOM #Accessibility #WebDev #Frontend #HTML #JavaScript
Randomly thinking about the `shadowrootadoptedstylesheets` proposal today and had some thoughts about how it could support streaming use cases better.
https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1188
TIL that when you run `el.attachShadow({mode: "open" })` on an element with DSD it _clears_ the children while leaving the initial shadow root.
Not being able to style a shadow host using selectors like `:host:hover` or `:host:focus` is gonna be a real pain for #CSS mixins. You have to effectively break up all of your different states and can’t use nesting to make mixins that work in the light DOM and #ShadowDOM.
`slotted-index()` and `slotted-count()` might be useful CSS functions for shadow DOM, since the `sibling-` ones reflect light DOM information. #CSS #ShadowDOM #WebComponents
Wanna get some #webComponents topics on the docket for @w3c #TPAC? Join the planning discussion in https://discord.gg/kbba8cKPg9 and help us get the hottest button topics unlocked as vendors, contributors and the community gather next month in Kobe!
#shadowDOM #elementInternals #referenceTarget #declarativeCSSModules #htmlModules #DOMTemplating
#Development #Approaches
Structuring web components · Preserving semantics and browser features https://ilo.im/166zdd
_____
#SemanticHTML #Accessibility #Browser #WebComponents #HtmlWebComponents #DOM #ShadowDOM #WebDev #Frontend #HTML
#Development #Approaches
Automatic dark mode · A solid technique with web component support https://ilo.im/166xyi
_____
#DarkMode #CSS #CustomProperties #JavaScript #WebComponents #ShadowDOM #DesignTokens #WebDev #Frontend
I love that you can expose a shadow part with multiple names using `exportparts`.
```html
<site-header exportparts=nav-list,nav-list:header-nav-list></site-header>
<site-footer exportparts=nav-list,nav-list:footer-nav-list></site-footer>
```
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>
I learned about the connectivity issues in #webComponents and #shadowDom with #aria #aria-labelledby #a11y
https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/
Le Shadow DOM, c’est pas magique.
C’est puissant, ou chiant.
Ça dépend comment tu t’en sers.
Super article si t’en as marre de te battre avec les limites du truc.
https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/
#ShadowDOM #WebDev #HTML
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:
#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
