Mastodawn

Modern CSS Feature Support for Shadow DOM, by @adobe.com:

https://shadow-dom-css.adobe.com/

#websites #css #shadowdom #browsers #support

Modern CSS Feature Support For Shadow DOM

Tracking the state of support for CSS features within and across the shadow DOM to provide visibility into feature parity, usage details, and outstanding issues and bugs.

Modern CSS for Shadow DOM

Frontend Dogma 6d ago

Constructable Stylesheets and “adoptedStyleSheets”: One Parse, Every Shadow Root, by @frontendmasters.com:

https://frontendmasters.com/blog/constructable-stylesheets-and-adoptedstylesheets-one-parse-every-shadow-root/

#webcomponents #lit #css #javascript #apis #shadowdom

Constructable Stylesheets and adoptedStyleSheets: One Parse, Every Shadow Root – Frontend Masters Blog

If you have any shared styles across multiple shadow DOMs (imagine 20 custom button components), a Constructable Stylesheets is just way more efficient.

Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend [Unofficial]Apr 23

Constructable Stylesheets and adoptedStyleSheets: One Parse, Every Shadow Root

https://fed.brid.gy/r/https://frontendmasters.com/blog/constructable-stylesheets-and-adoptedstylesheets-one-parse-every-shadow-root/

Inautilo Apr 17

#Development #Launches
Modern CSS feature support for shadow DOM · “Think ‘CanIUse’ but for CSS for web components.” https://ilo.im/16c6w2

_____
#WebComponents #ShadowDOM #Baseline #Browsers #WebDev #Frontend #DOM #HTML #JavaScript

Modern CSS Feature Support For Shadow DOM

Tracking the state of support for CSS features within and across the shadow DOM to provide visibility into feature parity, usage details, and outstanding issues and bugs.

Modern CSS for Shadow DOM

Frontend Dogma Mar 26

Shadow DOM Focus Delegation: Getting “delegatesFocus” Right, by @frontendmasters.com:

https://frontendmasters.com/blog/shadow-dom-focus-delegation-getting-delegatesfocus-right/

#accessibility #shadowdom #focus #javascript #lit #webcomponents

Shadow DOM Focus Delegation: Getting delegatesFocus Right – Frontend Masters Blog

You don't necessarily have to do focus handling yourself with shadow DOM web components. For simple wrapper components, there is an easier (and better) way.

Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend [Unofficial]Mar 24

Shadow DOM Focus Delegation: Getting delegatesFocus Right

https://fed.brid.gy/r/https://frontendmasters.com/blog/shadow-dom-focus-delegation-getting-delegatesfocus-right/

Inautilo Feb 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

Inautilo Jan 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 Dogma Dec 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