#shadowdom — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #shadowdom, aggregated by home.social.
-
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.comPlease 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.comPlease 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
-
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
-
Modern CSS Feature Support for Shadow DOM, by @adobe.com:
-
Modern CSS Feature Support for Shadow DOM, by @adobe.com:
-
Constructable Stylesheets and “adoptedStyleSheets”: One Parse, Every Shadow Root, by @frontendmasters.com:
-
Constructable Stylesheets and “adoptedStyleSheets”: One Parse, Every Shadow Root, by @frontendmasters.com:
-
#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/
-
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
-
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):
-
Referencing HTML Elements Inside Shadow DOM, by @mehm8128 (@matuzo):
-
#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
-
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
-
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>
``` -
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>
-
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/ -
Web Components: Working With Shadow DOM, by @smashingmag:
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/
-
Public CSS Custom Properties in the Shadow DOM, by @michaelwarren.dev:
-
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 -
#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-injectorShadowRoot 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? -
#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? -
shadow parts are pretty good actually.
-
shadow parts are pretty good actually.
-
How do I figure out the total number of DOM nodes in a page, _including_ #ShadowDOM, open and closed?
-
How do I figure out the total number of DOM nodes in a page, _including_ #ShadowDOM, open and closed?
-
#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