Closed
Description
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)
}
})
}
}