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.
Re:Declarative Shadow DOM
by irishcarbomb777 on Monday February 13, 2023 @08:08PM
(#34783701)
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
* * *
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).
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?