use shadow dom and scoped CSS to avoid styles leaking / collisions (high selector specificity hard to guarantee)

[danielweck]

Potential problem 1: in some cases like popup footnotes, we want some authored and reading system CSS rules to apply to the content fragment.

Potential problem 2: screen reader support, accessibility tree.

The current implementation(s) rely on ad-hoc style reset techniques, which sometimes break due to edge cases, and rare(r) authoring patterns that reveal CSS leaks/collisions.

Impacted DOM fragments: any content injected by the reading system into authored documents.

• underscore a11y link (the only one at the top of the document, all other injected DOM is located at the end of body)
• highlights (HTML or SVG)
• popup footnotes (modal dialog)
• image zoom popout (modal dialog)
• read aloud TTS caption mode (modal dialog), as well as the collapsed invisible mode (inlined synthetic speech highlighting, but still with control overlay)
• MathJax (out of our control, maybe uses shadow DOM already?)