GoogleChromeLabs / css-paint-polyfill

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.
https://googlechromelabs.github.io/css-paint-polyfill/
Apache License 2.0
740 stars 21 forks source link

Polyfill does not work with ShadowDOM #13

Open Devcon4 opened 4 years ago

Devcon4 commented 4 years ago

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.

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 commented 4 years ago

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.