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

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

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

#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

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

#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