Re: [WICG/webcomponents] Shadow dom innerhtml and CSP unsafe-inline (#627)

So, using Web Animation API can seem to be a solid workaround. Instead of templating like this:

````html
<div id="bar" style="{computeBarStyle()}">
````

You can instead:

````js
shadowRoot.getElementById('bar').animate([
  computeBarStyle()
 ], {
    duration: 0,
    fill: 'forwards',
  }
 );
 ````
 
It apparently works pretty well. I couldn't measure a performance difference. Not sure if it's an unintended "hack", to side step inline-styles, but if you're in shadow DOM, you're not letting your users manipulate shadow DOM trees anyway.

Only caveat is CSS Variables support for Web Animation API is non-existent on FireFox and Safari doesn't apply them to root. I've gone ahead and filed those issues, so if those get fixed, I would consider it production safe. It would just be on the Web Component author to apply styles in one sweep, instead of incrementally via `style.setProperty()`.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/627#issuecomment-1400777378
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/627/1400777378@github.com>