Option to add nonce value to style tag of vue3 web components

[landoephan]

What problem does this feature solve?

When I create web components via custom elements in vue3 (as described here: https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue), the styles are loaded directly into the shadow dom with a <style> tag. In order to meet content security policies, I would need to include a nonce value to this style tag when building the web component. Otherwise the styles are rejected with the following error message:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-xxx='". Either the 'unsafe-inline' keyword, a hash ('sha256-xxx='), or a nonce ('nonce-...') is required to enable inline execution.

It would be great, if a nonce value could be applied to the style tags while building the

What does the proposed API look like?

Add a nonce parameter to the _applyStyle method in apiCustomElement.ts:

private _applyStyles(styles: string[] | undefined, options?: { nonce: string }) {
    if (styles) {
      styles.forEach(css => {
        const s = document.createElement('style')
        s.textContent = css
        // it is important to add the nonce attribute before it is appended to the DOM
        s.setAttribute('nonce', options?.nonce || '')
        this.shadowRoot!.appendChild(s)
        // record for HMR
        if (__DEV__) {
          ;(this._styles || (this._styles = [])).push(s)
        }
      })
    }
  }

[yyx990803]

closed via bb4a02a (to be released in 3.5)