#shadowdom — Public Fediverse posts

React-like syntax with WebComponents.

​After spending some time with Lit, I really appreciated its lightweight footprint but wasn't a fan of the class-based components. While Vue offers a great approach, I still prefer the intuitive nature of React's syntax for debugging and deterministic rendering. This led me to a challenge: could I build a UI framework using WebComponents that completely eliminates the need for transpilation?

​I have written a breakdown of the concept, the architecture, and where I want to take it. I highly invite you to take a look, check out the code, and explore the live demo.

* How it works: https://positive-intentions.com/docs/projects/dim/dim-jsx-webcomponents
* Checkout the code: https://github.com/positive-intentions/dim
* Storybook demo: https://dim.positive-intentions.com

​Please note, while the project is open-source, this is a personal exploration rather than an attempt to launch "yet another framework." It is not production-ready and is built for my own upcoming project migrations, but I am sharing it in hopes that the methodology is educational or interesting to the community.

​I would love to hear your thoughts on this approach. Feel free to reach out if you have any questions or want to discuss the implementation details.

​#WebDev #WebDevelopment #Frontend #FrontendDev #JavaScript #JS #TypeScript #TS #HTML #HTML5 #CSS #SoftwareEngineering #SoftwareEngineer #Coding #Programming #WebDesign #OpenSourceProject #IndieDev #SideProject #Tech #Technology #DevCommunity #Fediverse #FediverseDevs #WebStandards #CustomElements #ShadowDOM #VanillaJS #NoTranspiler #NoBuild #BuildStep #EsModules #ComponentDriven #UIUX #DesignSystems #TechExperiment #LearningInPublic #Developer #ComputerScience #OSS #Github #React #WebComponents #Lit #Vue #ReactJS #JSX #Storybook #TechArticle #TechBlog #TechWriting #WebDevArticles

React-like syntax with WebComponents.

​After spending some time with Lit, I really appreciated its lightweight footprint but wasn't a fan of the class-based components. While Vue offers a great approach, I still prefer the intuitive nature of React's syntax for debugging and deterministic rendering. This led me to a challenge: could I build a UI framework using WebComponents that completely eliminates the need for transpilation?

​I have written a breakdown of the concept, the architecture, and where I want to take it. I highly invite you to take a look, check out the code, and explore the live demo.

* How it works: https://positive-intentions.com/docs/projects/dim/dim-jsx-webcomponents
* Checkout the code: https://github.com/positive-intentions/dim
* Storybook demo: https://dim.positive-intentions.com

​Please note, while the project is open-source, this is a personal exploration rather than an attempt to launch "yet another framework." It is not production-ready and is built for my own upcoming project migrations, but I am sharing it in hopes that the methodology is educational or interesting to the community.

​I would love to hear your thoughts on this approach. Feel free to reach out if you have any questions or want to discuss the implementation details.

​#WebDev #WebDevelopment #Frontend #FrontendDev #JavaScript #JS #TypeScript #TS #HTML #HTML5 #CSS #SoftwareEngineering #SoftwareEngineer #Coding #Programming #WebDesign #OpenSourceProject #IndieDev #SideProject #Tech #Technology #DevCommunity #Fediverse #FediverseDevs #WebStandards #CustomElements #ShadowDOM #VanillaJS #NoTranspiler #NoBuild #BuildStep #EsModules #ComponentDriven #UIUX #DesignSystems #TechExperiment #LearningInPublic #Developer #ComputerScience #OSS #Github #React #WebComponents #Lit #Vue #ReactJS #JSX #Storybook #TechArticle #TechBlog #TechWriting #WebDevArticles

Devtools: How to Query Through the Shadow DOM, by @rem:

https://remysharp.com/2026/05/01/devtools-how-to-query-through-the-shadow-dom?ref=frontenddogma.com

#howtos #shadowdom #javascript #devtools #browsers

Devtools: How to Query Through the Shadow DOM, by @rem:

https://remysharp.com/2026/05/01/devtools-how-to-query-through-the-shadow-dom?ref=frontenddogma.com

#howtos #shadowdom #javascript #devtools #browsers

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, by @adobe.com:

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

#websites #css #shadowdom #browsers #support

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, by @frontendmasters.com:

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

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

#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

#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

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, by @frontendmasters.com:

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

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

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

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

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

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

#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

#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/

#shadowdom #html #javascript

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

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, 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):

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

#html #shadowdom #webcomponents

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

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

#html #shadowdom #webcomponents

#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

#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

#ShadowDOM #Streaming #Web #Perf

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

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.

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

`slotted-index()` and `slotted-count()` might be useful CSS functions for shadow DOM, since the `sibling-` ones reflect light DOM information. #CSS #ShadowDOM #WebComponents

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

#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>
```

#HTML #CSS #CustomElements #ShadowDOM

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

#HTML #CSS #CustomElements #ShadowDOM

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

#WebComponents #CustomElements #ShadowDOM #HTML #WebDev

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

#WebComponents #CustomElements #ShadowDOM #HTML #WebDev

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/

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

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

#webcomponents #shadowdom #dom #html

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

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

#webcomponents #shadowdom #dom #html

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

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

#css #customproperties #shadowdom #dom #animations

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

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

#css #customproperties #shadowdom #dom #animations

#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

#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

#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

shadow parts are pretty good actually.

#shadowdom #webcomponents

shadow parts are pretty good actually.

#shadowdom #webcomponents

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

#webdev #webcomponents

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

#webdev #webcomponents

#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