How to modify a site that uses closed shadow dom?

Question

Given a site that uses web components with closed shadow roots, how do I access or modify the DOM from a extension content script?

Answer 1

Firefox 63 introduced the privileged accessor Element.openOrClosedShadowRoot (MDN documentation) to allow webextensions to access shadow roots regardless of their open/closed state.

Other APIs such as querySelectorAll are still affected by shadow dom isolation, so to find shadow roots an extension will have to walk the entire tree via NodeIterator or TreeWalker to check for shadow roots. Since shadow roots may be attached at later point extensions may also have to wait for page modifications via mutation observers before attempting to access shadow DOM, so overall this approach is less ergonomic than using querySelector, but at least it's possible.