feat: handle nonce/csp

Author: kernoeb

package/index.js

@@ -17,6 +17,7 @@ export const createWebComponent = ({
   asyncInitialization = () => Promise.resolve(),
   loaderAttribute = 'data-web-component-loader',
   hideSlotContentUntilMounted = false,
+  nonce
 }) => {
   if (!rootComponent) {
     console.warn('No root component provided. Please provide a root component to create a web component.')
@@ -59,7 +60,8 @@ export const createWebComponent = ({
     replaceRootWithHostInCssFramework,
     asyncInitialization,
     loaderAttribute,
-    hideSlotContentUntilMounted
+    hideSlotContentUntilMounted,
+    nonce
   }, ).then((customElementConfig) => {
     customElements.define(
       elementName,

package/src/web-component-util.js

@@ -40,7 +40,8 @@ export const defineCustomElement = ({
   replaceRootWithHostInCssFramework,
   asyncInitialization,
   loaderAttribute,
-  hideSlotContentUntilMounted
+  hideSlotContentUntilMounted,
+  nonce
 }) =>
   {
     const customElementDefiner = disableShadowDOM ? VueDefineCustomElementPatch : VueDefineCustomElement
@@ -50,6 +51,7 @@ export const defineCustomElement = ({
     : cssFrameworkStyles;
     const customElementConfig = customElementDefiner({
     styles: [modifiedCssFrameworkStyles],
+    nonce,
     props: {
       ...rootComponent.props,
       modelValue: { type: [String, Number, Boolean, Array, Object] } // v-model support
@@ -82,6 +84,7 @@ export const defineCustomElement = ({
             if (styles?.length) {
               this.__style = document.createElement('style')
               this.__style.innerText = styles.join().replace(/\n/g, '')
+              if (nonce) this.__style.setAttribute('nonce', nonce);
               nearestElement(this.$el).append(this.__style)
             }
           }

package/types.d.ts

@@ -19,6 +19,7 @@ export interface CreateWebComponentOptions {
   asyncInitialization?: () => Promise<any>
   loaderAttribute?: string
   hideSlotContentUntilMounted?: boolean
+  nonce?: string
 }
 
 export function createWebComponent(options: CreateWebComponentOptions): void