Shadow DOMs – the WORST invention in web standard history.

As a user script and user style developer, the shadow DOM has been a massive headache. Shitow DOMs block custom CSS, blocks parts of the page from being saved, and blocks user scripts and browser extensions. Shitow DOMs are an utter nightmare, especially closed ones.

And now, Google Gerrit's entire user interface is shadowdoomed. The only way to save pages locally is to scrape the JSON from the developer tools, but that is not possible on mobile.

If you‘re not already fucked up enough, try using @font-face within shadow dom…
Spoiler: it doesn’t work. SINCE ALMOST 10 FUCKING YEARS!!!

Shadow DOM is a pain for those expecting the old HTML experience of being able to use the entire page like one big global variable.

It's a blessing for those who can efficiently take advantage of the powers of it, and anyone who has tried to do stuff like install more than one jQuery UI library at once knows the struggles it saves.

One criticism is the idea of a permanently closed DOM, though. It's what makes working with <select> (and other such) elements difficult already. You really should be allowed to open the contents of a shadow DOM if need be

It's your fuckin website anyways.

@AlgoRythm You can attach a shadow root in open or closed mode. Open mode means it is accessible.
Source: https://developer.mozilla.org/en-US...

Why do you want to save the page? Most websites won‘t work anyway if you open them from a saved file.

@TheSilent yes yes, of course. But I said that the issue is the permanently closed mode. If you use a 3rd party web component that uses closed mode, you as a developer have no real option to access the elements inside; you can't re-open a closed shadow DOM even though it's a god damn widget on your own god damn website. The only solution is to modify the source code of someone else which may not be an option

You forgot JavaScript.

@Lensflare A static snapshot of the page, just for viewing and not interacting.

@exerceo yeah I know but why?

@Lensflare For reference purposes. Contents may be altered. Why else would one save it?

@AlgoRythm If such JQuery libraries used simple scoping, that would save it.

@exerceo scoping saves CSS from leaking out but not from CSS bleeding in

@AlgoRythm Yeah, that CSS and the surrounding HTML might require some minor patchwork as well. Perhaps shadow DOMs are justified in some exceptional cases, but I still don't see why all of Google Gerrit's user interface is in multiple nested levels of shadow DOMs rather than an ordinary DOM tree.

Even Archive.org's home page uses shadow DOMs as of 2022 for simple elements such as navigation bars that would work perfectly fine without it, but they have a non-JavaScript fallback page anyway. Ironically, their web archive is unable to capture contents of shadow DOMs.