#ShadowDOM

@inautilo.bsky.social

1 month ago

Reference Target: having your encapsulation and eating it too How reference target allows us to improve accessibility when using shadow DOM

#Development #Proposals
Reference Target · Improving accessibility when using shadow DOM ilo.im/16aixw by Alice Boxhall

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

1 0 0 0

Inautilo

@inautilo.bsky.social

2 months ago

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...

#Development #Templates
Web component starter template · The essentials to ship production-ready components ilo.im/169jml by Aaron Gustafson

_____
#WebComponents #CustomElements #Accessibility #ProgressiveEnhancement #Encapsulation #ShadowDOM #Testing #Npm #WebDev #Frontend

2 0 0 0

Frontend Dogma

@frontenddogma.com

2 months ago

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.

Targeting by Reference in the Shadow DOM, by @meyerweb@mastodon.social:

meyerweb.com/eric/thoughts/2025/12/19...

#shadowdom #html #javascript

0 0 0 0

Frontend Dogma

@frontenddogma.com

3 months ago

Web Backstories: Shadow DOM Eric Meyer and Brian Kardell chat with Jay Hoffmann and Jeremy Keith about Shadow DOM's backstory and long origins

Web Backstories: Shadow DOM, by @adactio@mastodon.social and @jayhoffmann@mastodon.social (@igalia@floss.social):

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

#podcasts #interviews #shadowdom #webcomponents #standards

0 0 0 0

Frontend Dogma

@frontenddogma.com

3 months ago

Referencing HTML elements inside Shadow DOM - HTMHell A collection of bad practices in HTML, copied from real websites.

Referencing HTML Elements Inside Shadow DOM, by @mehm8128@mastodon.social (@matuzo@front-end.social):

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

#html #shadowdom #webcomponents

2 0 0 0

westbrook

@westbrook.mastodon.social.ap.brid.gy

3 months ago

#adopted-style-sheet listing directly under the #shadow-root listing they've been adopted by in Chrome Canary Dev tools.

The styles from an #adopted-style-sheet as attached to a #shadow-root expanded for review in Chrome Canary Dev Tools.

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

#webComponents #shadowDOM #CSS

5 1 0 0

Inautilo

@inautilo.bsky.social

3 months ago

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.

#Development #Guides
Easier than expected · Testing HTML light DOM web components ilo.im/168ims by Gerardo Rodriguez

_____
#Testing #HtmlWebComponents #WebComponents #LightDOM #ShadowDOM #Accessibility #WebDev #Frontend #HTML #JavaScript

1 0 0 0

Doug Parker

@develwithoutacause.dwac.dev

4 months ago

[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...

Randomly thinking about the `shadowrootadoptedstylesheets` proposal today and had some thoughts about how it could support streaming use cases better.

github.com/MicrosoftEdg...

#ShadowDOM #Streaming #Web #Perf

2 0 0 0

westbrook

@westbrook.mastodon.social.ap.brid.gy

4 months ago

Attaching a Shadow Root to an element with DSD ...

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

1 0 1 0

westbrook

@westbrook.mastodon.social.ap.brid.gy

5 months ago

Original post on mastodon.social

Wanna get some #webComponents topics on the docket for @w3c #TPAC? Join the planning discussion in https://discord.gg/kbba8cKPg9 and help is get the hottest button topics unlocked at vendors, contributors and the community gather next month in Kobe!

#shadowDOM #elementInternals #referenceTarget […]

4 0 0 0

Inautilo

@inautilo.bsky.social

5 months ago

Structuring web components to preserve semantics and browser features Semantic HTML

#Development #Approaches
Structuring web components · Preserving semantics and browser features ilo.im/166zdd by Chris Smith

_____
#SemanticHTML #Accessibility #Browser #WebComponents #HtmlWebComponents #DOM #ShadowDOM #WebDev #Frontend #HTML

0 0 0 0

Inautilo

@inautilo.bsky.social

5 months ago

Automatic dark mode The most straightforward way to implement automatic mode switching.

#Development #Approaches
Automatic dark mode · A solid technique with web component support ilo.im/166xyi by Michael Warren

_____
#DarkMode #CSS #CustomProperties #JavaScript #WebComponents #ShadowDOM #DesignTokens #WebDev #Frontend

2 0 0 0

sprungmarkers (she / her)

@sprungmarker.mastodon.social.ap.brid.gy

6 months ago

Web Components: Working With Shadow DOM — Smashing Magazine Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader picture, explaining why it matters, when to use it, and how to apply it effectively.

I learned about the connectivity issues in #webComponents and #shadowDom with #aria #aria-labelledby #a11y
www.smashingmagazine.com/2025/07/web-components-w...

0 0 0 0

sprungmarker

@sprungmarker.bsky.social

6 months ago

Web Components: Working With Shadow DOM — Smashing Magazine Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader ...

www.smashingmagazine.com/2025/07/web-...

I learned about the connectivity issues in #webComponents and #shadowDom with #aria #aria-labelledby #a11y

0 0 0 0

Ange Chierchia

@nighcrawl.bsky.social

7 months ago

Web Components: Working With Shadow DOM — Smashing Magazine Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader...

Tu kiffes les Web Components, jusqu’à ce que le Shadow DOM décide de faire sa diva ?
T’es pas seul.
Lis ça, tu vas relativiser (ou tout casser, au choix).

www.smashingmagazine.com/2025/07/web-...
#shadowdom

0 0 0 0

FreelanceBar.me

@freelancebarme.bsky.social

7 months ago

Web Components: Working With Shadow DOM — Smashing Magazine Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader picture, explaining why it matters, when to use it, and how to apply it effectively.

Discover the importance of Shadow DOM in Web Components with Russell Beswick. Learn when and how to effectively apply this key technology. #WebComponents #ShadowDOM. smashingmagazine.com/2025/07/web-components-w...

0 0 0 0

Frontend Dogma

@frontenddogma.com

7 months ago

Web Components: Working With Shadow DOM — Smashing Magazine Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader picture, explaining why it matters, when to use it, and how to apply it effectively.

Web Components: Working With Shadow DOM, by @smashingmag@mastodon.social:

www.smashingmagazine.com/2025/07/web-components-w...

#webcomponents #shadowdom #dom #html

7 2 0 0

Frontend Dogma

@frontenddogma.com

7 months ago

Public CSS Custom Properties in the Shadow DOM The definitive guide to using public CSS Custom properties to configure web components externally. Surely no one will ever write about this topic again.

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

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

#css #customproperties #shadowdom #dom #animations

1 1 0 0

entwickler.de

@entwicklerde.bsky.social

8 months ago

Web Components von 0 auf 100 | Tutorial mit 5 Lektionen In diesem Tutorial erhältst du von Peter Kröner Schritt-für-Schritt einen Überblick über die Fähigkeiten und Limitierungen von Web Components.

Framework-Fesseln? Dependency-Depression? Willkommen bei den #WebComponents

Universell, wiederverwendbar, aber oft kompliziert. Peter Kröner zeigt dir im neuen Tutorial, wie du Web Components wirklich verstehst & einsetzt.

Jetzt starten: entwickler.de/tutorials/we...

#Frontend #Lit #ShadowDOM

0 0 0 0

Aesira

@aesirab.bsky.social

8 months ago

You know what’s appealing to me? You sending without me telling you to. You knowing my worth and showing me.

#FacelessDomme #Findomme #Paypig #CashPig #WalletDrain #HumanATM #ObeyAndSuffer #SendTribute #KneelAndPay #FinancialControl #Goddess #Princess #PowerExchange #DigitalDomination #ShadowDom

0 0 0 0

Pankaj Sharma | 100% Follow Back

@pankajsharmaa.bsky.social

9 months ago

Difference Between Shadow DOM And Virtual DOM Discover the key difference between Shadow DOM and Virtual DOM in web development for better performance, encapsulation, and rendering.

What Is The Difference Between Shadow DOM And Virtual DOM? - bizdirectoryhub.com/difference-b...

𝐅𝐨𝐫 𝐅𝐫𝐞𝐞 𝐂𝐨𝐧𝐬𝐮𝐥𝐭𝐚𝐭𝐢𝐨𝐧:
𝐂𝐚𝐥𝐥/𝐖𝐡𝐚𝐭𝐬𝐚𝐩𝐩: +91-9711526942

#Mernstack #Fullstack #ShadowDOM #VirtualDom #educational #OnlineClass #TrainingTogether #CromaCampus #mernstackdeveloper #MERNStackDevelopment

1 0 0 0

Peter Kröner

@sirpepe.bsky.social

10 months ago

How do I figure out the total number of DOM nodes in a page, _including_ #ShadowDOM, open and closed?

#webdev #webcomponents

0 0 1 0

Danny Engelman 🌷🏍️🛥️

@engelman.nl

1 year ago

> WTF is #ShadowDOM and can it please go away?

Then your Browser would only display simple HTML.

There won't be any <input> or <textarea> or <video>
elements as they all have (user-agent) shadowDOM

You are free to NOT apply shadowDOM to your own elements

1 0 1 0

Štěpán 💤

@stepan.f.cz.ap.brid.gy

1 year ago

Wtf is #ShadowDOM and can it please go away?

2 0 3 0

Keith Cirkel

@keithamus.social

1 year ago

[cssom] Can we lift the restriction on constructed flag for adoptedStylesheets? · Issue #10013 · w3c/csswg-drafts Currently adoptedStyleSheets has a restriction on CSSStyleSheets that have the constructed flag set: The set an indexed value algorithm for adoptedStyleSheets, given value and index, is the followi...

github.com/w3c/csswg-dr...

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!

22 9 0 0

Matthi

@matthi.dev

1 year ago

Shadow DOM is like the dark side of the moon for me.
Fixing drag events 🥸
Does anybody know a great DnD lib for react.js or vanilla?

#buildinpublic #javascript #shadowdom

4 0 1 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Text on green rhomboid: 6 Dec 18 Orange text on cyan background: Declarative Shadow DOM

🔵 Declarative Shadow DOM
By Schalk Neethling @schalkneethling.bsky.social
Declarative shadow DOM enables seamless server-side rendering for the web platform.
at Stephanie Eckles @5t3ph.bsky.social 12 Days of Web
#ShadowDOM #webdev

12daysofweb.dev/2024/declara...

2 0 1 0

Pat

@patalinguist.bsky.social

1 year ago

darth vader in a dark room with the words if you only knew the power of the dark side Alt: darth vader in a dark room with the words if you only knew the power of the dark side

I do not like #shadowdom and I cannot lie.

0 0 0 0

CuriousCoder

@chopsueey.bsky.social

1 year ago

Declarative Shadow DOM | web.dev Declarative Shadow DOM is a new way to implement and use Shadow DOM directly in HTML.

What is the Shadow DOM?

The #shadowDOM is a web standard that enables encapsulation of #HTML and #CSS,
allowing developers to create components with isolated styling and structure.

Those so called web components are like custom HTML-Elements, but with all the utilities and properties of...

0 0 1 0

Pablo Lara H.

@pablolarah.bsky.social

1 year ago

Green text projecting shadows on red/white duotone illustrated entrance with columns: The Shadow DOM is in the front

🏫 The Shadow DOM is in the front
by Sufian Rhazi @sufian@apub.abstract.properties
#ShadowDOM #webdev

abstract.properties/the-shadow-d...

0 0 0 0

Posts tagged #ShadowDOM