use shadow dom and scoped CSS to avoid styles leaking / collisions (high selector specificity hard to guarantee) #65
Description
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?)