From 4f42daeff78a98877d58dff49b6e05b3a4ae0f73 Mon Sep 17 00:00:00 2001 From: Jay Harris Date: Sat, 28 Jan 2023 13:25:04 +1300 Subject: [PATCH] feat: `trusted-types` CSP compatibility for Web Components (#8135) --- src/compiler/compile/render_dom/index.ts | 5 ++++- test/js/samples/css-shadow-dom-keyframes/expected.js | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 44155f8464..58b7a8317b 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -531,7 +531,10 @@ export default function dom( constructor(options) { super(); - ${css.code && b`this.shadowRoot.innerHTML = \`\`;`} + ${css.code && b` + const style = document.createElement('style'); + style.textContent = \`${css.code.replace(regex_backslashes, '\\\\')}${css_sourcemap_enabled && options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}\` + this.shadowRoot.appendChild(style)`} @init(this, { target: this.shadowRoot, props: ${init_props}, customElement: true }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, null, ${dirty}); diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index 5d65949488..ba7ca9a667 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -34,7 +34,9 @@ function create_fragment(ctx) { class Component extends SvelteElement { constructor(options) { super(); - this.shadowRoot.innerHTML = ``; + const style = document.createElement('style'); + style.textContent = `div{animation:foo 1s}@keyframes foo{0%{opacity:0}100%{opacity:1}}`; + this.shadowRoot.appendChild(style); init( this,