InautiloFeb 13

#Development #Proposals
Reference Target · Improving accessibility when using shadow DOM https://ilo.im/16aixw

_____
#WebComponents #Accessibility #ARIA #Encapsulation #ShadowDOM #Browsers #WebDev #Frontend #HTML #JavaScript

Reference Target: having your encapsulation and eating it too

How reference target allows us to improve accessibility when using shadow DOM

InautiloJan 5

#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

A Production-Ready Web Component Starter Template :: Aaron Gustafson

Creating a new web component from scratch involves a lot of boilerplate—testing setup, build configuration, linting, CI/CD, documentation structure, and more. After building — and refining/rebuilding — numerous web components, I’ve distilled all that work into a starter template that lets you focus on your component’s functionality rather than project setup.

Frontend DogmaDec 23

Targeting by Reference in the Shadow DOM, by @Meyerweb:

https://meyerweb.com/eric/thoughts/2025/12/19/targeting-by-reference-in-the-shadow-dom/

#shadowdom #html #javascript

Targeting by Reference in the Shadow DOM

A new way to allow elements inside a Shadow DOM to be targeted for accessibility or other reasons.

Frontend DogmaDec 11

Web Backstories: Shadow DOM, by @adactio and @Jayhoffmann (@igalia):

https://www.youtube.com/watch?v=GJlhzxVftCk

#podcasts #interviews #shadowdom #webcomponents #standards #history

Web Backstories: Shadow DOM

YouTube
Frontend DogmaDec 5

Referencing HTML Elements Inside Shadow DOM, by @mehm8128 (@matuzo):

https://www.htmhell.dev/adventcalendar/2025/4/

#html #shadowdom #webcomponents

Referencing HTML elements inside Shadow DOM - HTMHell

A collection of bad practices in HTML, copied from real websites.

Referencing HTML elements inside Shadow DOM - HTMHell
westbrookDec 2

Awesome new #adoptedStyleSheets features in @Chrome #canary. 😲

#webComponents #shadowDOM #CSS

InautiloNov 18

#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

Testing HTML Light DOM Web Components: Easier Than Expected!

Testing HTML Light DOM web components wasn't so scary after all. Some testing notes and patterns from a recent project.

Cloud Four
Doug Parker 🕸️Nov 14

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

#ShadowDOM #Streaming #Web #Perf

[Declarative Shadow DOM Style Sharing] Streaming `shadowrootadoptedstylesheets` · Issue #1188 · MicrosoftEdge/MSEdgeExplainers

I'm not convinced shadowrootadoptedstylesheets really meets the needs of streaming use cases. Often when rendering a component, you don't know what stylesheets you need until you've actually render...

GitHub
westbrookNov 13

TIL that when you run `el.attachShadow({mode: "open" })` on an element with DSD it _clears_ the children while leaving the initial shadow root.

https://codepen.io/Westbrook/pen/xbVwwPN?editors=1111

#webComponents #shadowDOM #DSD #TPAC

Attaching a Shadow Root to an element with DSD

...

Nathan KnowlerOct 30
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.