The shadow DOM almost is DRM (digital rights management) in disguise. You can see it but you can't save it.

Don't forget who invented the shadow DOM: Google.

you can access and save it with extension

https://developer.chrome.com/docs/...

The reason you can save anything at all is that user agents allow you to do so, because websites are presented in a structured, machine-readable format. Any tool that gives user agents more information about the content being presented is a move towards an open internet, and it's entirely your choice to use or extend a user agent that exposes this information.

@vane Even then, it requires great workarounds. And shadow DOMs can be open and closed. Closed ones are inaccessible from external JavaScript.

*opens new tab*

I never thought about it from that point of view. Smart move to get all the developers behind the idea promoting encapsulation and portability. Commercial entities definitely have an outsize impact on the W3C & ECMA-standard. See for ex https://cdt.org/insights/...

@exerceo Both closed and open shadow root is accessible from extension content script. I posted link with a method that returns element. I use it in my extension to save websites. In firefox it's Element.openOrClosedShadowRoot and for chrome it's chrome.dom.openOrClosedShadowRoot(element).

There are more inaccessible elements like webassembly.

There is actually a point in shadow DOM, and that's performance for complex web applications.

Here's the thing: when you access DOM stuff from JS in a read-write-read-write sequence, you force the browser to re-layout so that the second read gives accurate data even if it's unrelated, but the browser won't know. Do that often, and the performance just tanks.

So the solution is to instead use read-read-write-write, but that works only for small scriptlets. As soon as you need to split things up as not to end up with a spaghetti mudball, the encapsulation means that you can't batch up reads and writes across components.

Shadow DOM to the rescue! All components do their work on the shadow DOM, the browser doesn't do re-layouts over and over, and there's one final instance that then syncs up the shadow DOM to the browser DOM in one go.