It's a bit of an aside, but what do you get from the shadow DOM?
I've given a real, honest effort to using the shadow DOM for a bunch of WebComponents and it just seems like it makes everything harder for no benefit that I've been able to find. Every example I've found of WebComponents using the shadow DOM seems to show many many lines of weirdly-inverted HTML (templates/slots) and JavaScript, all to achieve what I can do in a few "document.creatElement"s (vanilla JavaScript) that are easier to understand. And using the shadow DOM means my global CSS styles don't apply to what I do there without absurd hacks.
I have honestly been looking for a benefit here, but I just don't see it. What am I missing?
To me the major benefits of shadow DOM only come into play when you're making a web page composed of components that you don't fully own. Whether that's different teams maintaining different components, or you acquired some components from a third party vendor, or even just to isolate your host's (like wix/other site builders) components from your own. Shadow DOM lets things play together more nicely and without as much mutual trust needed.
You are correct. If you control the webpage, just get good and write correct CSS (including new CSS layers). If you don’t control the page, Shadow DOM is actually leaky in weird ways (inheriting fonts and colors, for example), so you want an iframe. There’s not many good uses for it, and it should be a CSS thing, not a JS thing anyway.
I don't like having a bunch of styles fighting each other. It is similar to the !important stuff. In fact I sometimes thought it was better before !important was verboten. It was overused, though.
Only the shadow DOM provides some relief from this annoying part of web development.
Svelte does it in the compilation phase without shadow DOM.
I understand that precompiling is an extra step, but the React codebases that use shadow DOM are doing precompiling anyways (tsx), in which case it doesn't make sense anymore.
Not a fan of all this prefixing even if it works most of the time, it's a kludge IMO.
The state of code distribution in js is pretty sad IMO. Most es modules are faked. I would like the opposite of Vite where the real es modules are in production. Modules aren't just treated like a toy in other languages. :(
Prefixing should be web components instead probably (for some reason Svelte doesn't default to it, but there should be a push to make it work).
About Vite: I agree, it's not how it should be done. Svelte components should be compiled to real modules with real, easy to understand paths. I would love to use a system that actually I understand, and just compile things to module imports. We could hack it together maybe, it's HackerNews anyways :)
I mean, the shadow DOM practically forces you to put the styles with the elements they style. If you're going to do that, there's nothing stopping you from just exclusively using the style attribute in HTML, which would achieve the same result without the shadow DOM.
In my experience when I start running into problems with competing styles it's usually because I've not structured my CSS well, although admittedly, structuring your CSS well is pretty hard to do.
