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

Description

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

Suggested solution

Unfortunately, I don’t know where these changes could be implemented

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

Closing as this needs to be implemented on vue side.

@tony19 Thanks for the explanation!

[landoephan]

I just override the _applyStyles function, so the nonce attribute is added to the style tag before appendChild(style) is called. Like this:

  _comp.prototype._applyStyles = function (styles: string[]) {
    if (styles) {
      styles.forEach((css) => {
        const s = document.createElement('style')
        s.textContent = css
        s.setAttribute('nonce', options?.nonce || defaultNonce)
        this.shadowRoot?.appendChild(s)
        // record for HMR
        if (import.meta.env.DEV) {
          ;(this._styles || (this._styles = [])).push(s)
        }
      })
    }
  }

My reverse-proxy needs it like that. This way all works great, thanks a lot for your help.