Build your web component library
Charmingly designed components that you can use in all your apps. Slots without Shadow DOM
Get Started ➡️
Fast to fork and modify.
Web Components can be combined with every framework or library.
Web components are part of the native browser APIs.
Great integration with existing tools like TypeScript, JSX etc.
Motivation
My goal is to use custom elements without the Shadow DOM. More to that in a minute. I also wanted to create my own solution that pairs well with my UI library hydro-js.
How does it differ to other solutions?
When I started this project Web Components without the Shadow DOM were unheard of. I did some research and found the following (I hope it may help you):
Shadow DOM doesn’t actually work.
I have worked with many brands. And for big brands like Porsche and DHL too. They were using Web Components too (which is great)! But working with the Shadow DOM was always painful. For me, it felt like maintenance overhead. I think that CSS should be easily modifiable because Design Systems are ever evolving. Having to wait for the next version or for some "decision-making" is irrational. The same applies for interactive changes with JavaScript. Here are some more detailed reasons:
- Flash of Undefined Custom Elements or workarounds.
- Inconsistent behavior like encapsulation, but CSS custom properties piercing through and inherited values.
- Accessibility issues and handling forms...
- More boilerplate code when creating stuff with JavaScript (selecting the shadowRoot first).
- Server-side rendering is still (even with DSD) a problem.