Polyfill does not work with ShadowDOM

[Devcon4]

There is some work to be done to make this polyfill work on websites that use ShadowDOM. Currently it will not correctly find/fix styles if they are inside of a shadowRoot. I ran into this problem when trying to polyfill a Lit-Element project which heavily uses ShadowDOM. I have been working on a fork to get my site working but a real fix will involve quite a few changes.

These are a few of the problems I have ran into trying to get it working.

• documnet.styleSheets does not include stylesheets in shadowRoots, you have to use element.shadowRoot.styleSheets. This involves tracking shadowRoots.
• MutationObserver does not track changes inside of shadowRoots. To fix every shadowRoot needs to be observed by the MutationObserver. This involves tracking shadowRoots.
• There is no Event for when attachShadow is called, this makes tracking shadowRoots annoying. The only fix I have found is to override the attachShadow prototype (gross).
• OverrideStyles are not accessible from inside of a shadowRoot, they need to be added to every root.
• moz-element can't find elements outside of it's shadowRoot (as far as I can tell). This involves add canvas elements to each shadowRoot rather than the root element.

It's a gross list of problems... The biggest change to me will be shifting from having a single root element to adding a root per shadowRoot (and document). The other big change is to observe every shadowRoot and not just the document to detect style changes.

There could be more issues, I have been mainly looking at Firefox and haven't checked Safari/IE.

Thoughts?

[developit]

Nice summary of the issues! Personally, looking at this list I'm inclined to deem this infeasible. The polyfill would have to account for both native and polyfilled Shadow DOM, with specific implementations for each, and there are some cases like moz-element that basically remove the whole performance value of this polyfill over plain-old-canvas.

For me, overriding attachShadow is a non-starter, since it relies on script loading order to perform injection prior to usage.