Comment by mgerdts | Hacker News Reader

Comment by mgerdts | Hacker News Reader

Parent Full thread

I first encountered shadow roots while trying to use tampermonkey to work around a problem with the latest release of Gerrit. What I thought would be a relatively trivial effort to find the right element and modify its style turned into a lot more effort.

https://gist.github.com/mgerdts/f508ae81795097397106156fa291...

While I get that the purpose of the shadow roots is to provide isolation, is there a simple way to break through that isolation without manually walking the DOM tree and traversing all of the .shadowRoot elements?

It seems Gerrit wraps most elements with a shadow root. For someone that doesn't do front-end development, is there an explanation for how this is helpful?

One nice way of handling this is to use the CSSStyleSheet object. In a nutshell, you can create a module like shadowCssRules.js and in that create a CSSStyleSheet object and set your global rules ( * { box-sizing: border-box;} ) then in your WebComponent constructor you call this.shadowRoot.adoptedStyleSheets = [shadowCssSheet]. This MDN page has an example at the bottom https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleShe...

Also allows you to update the style sheet from anywhere in your js and it’ll effect all the shadow doms that adopted it

Unfortunately none of that works with the feature in TFA because it’s not supported by Declarative Shadow DOM.

CSS variables help here quite a bit. I typically will add in component-specific tokens as css variables, that way I have simple penetration into the shadowdom.

Shadow roots are a nightmare when doing any kind of Web scraping or UI integration testing

If you own the browser, you can just nuke the `mode` option of `attachShadow` method before page itself runs. And bang, you can access to whatever you want now. So it isn't really a big deal if you are scraping or doing UI testing. Because the one runs first has the power to do whatever you want in js (Except for some primitive specifically protected in browser).

Reply on news.ycombinator.com