Make Svelte WebComponents compatible with trusted-types CSP

[fallaciousreasoning]

Describe the problem

Currently, when compiling Svelte components to Web Components, the style is set via innerHTML:

constructor(options) {
	super();

	this.shadowRoot.innerHTML = `<style>....</style>`
	......
}

This is fine, as the styles are generated at compile time and don't contain any untrusted data. However, if an application has a TrustedTypes CSP set up, this line will throw an error. The only way for them to fix it is to add a default policy, which isn't ideal as it reduces the protection from the policy.

Describe the proposed solution

Use textContent to set the stylesheet content, rather than innerHTML.

// Instead of
this.shadowRoot.innerHTML = `<style>${css}</style>`

// we might be able to do:
const style = document.createElement('style');
style.textContent = css;
this.shadowRoot.appendChild(style);

which might be preferable all round (not sure if there are any performance implications). I have a PR open with this fix #8135. I've tested using the our CSP in the version of Svelte from my fork and it fixes it nicely!

Alternatives considered

We could create a svelte-web-component-style-literal no-op policy which is used instead. That way, consumers can allow the svelte-web-component-style-literal policy if they use Svelte web-components and everything will just work. I have a branch with a working proof of concept https://github.com/fallaciousreasoning/svelte/tree/trustedTypes but I think it's a bit less elegant.

const policy = window.trustedTypes.createPolicy('svelte-web-component-style-literal', { createHTML: html => html });

// in our constructor
this.shadowRoot.innerHTML = policy.createHTML(`<style>${css}</style>`)

This is the same way LitHTML and Polymer have solved the problem:

• Lit: Add TrustedTypes support to lit-next lit/lit#1772
• Polymer: https://github.com/Polymer/polymer/blob/1e8b246d01ea99adba305ea04c45d26da31f68f1/lib/utils/html-tag.js#L22

Importance

i cannot use svelte without it (it breaks our CSP)

[Conduitry]

This should be fixed now in 3.56.0.