4 ms·

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 relative

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/f508ae81795097397106156fa291bafa 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?

jjcm 4y ago
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.
irishcarbomb777 4y ago
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/CSSStyleSheet/CSSStyleSheet 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
- jacobr 4y ago
  Unfortunately none of that works with the feature in TFA because it’s not supported by Declarative Shadow DOM.
sh4rks 4y ago
Shadow roots are a nightmare when doing any kind of Web scraping or UI integration testing
- mmis1000 4y ago
  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).

jjcm 4y ago

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.

irishcarbomb777 4y ago

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/CSSStyleSheet/CSSStyleSheet 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

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

sh4rks 4y ago

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

mmis1000 4y ago
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).