fix(runtime-dom): allow specifying additional options for for custom elements

padcom · padcom · commit 74d89b909a9e · 2025-02-27T16:12:02.000+01:00
close 12964
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
@@ -53,6 +53,7 @@ export type VueElementConstructor<P = {}> = {
 export interface CustomElementOptions {
   styles?: string[]
   shadowRoot?: boolean
+  shadowRootOptions?: ShadowRootInit
   nonce?: string
   configureApp?: (app: App) => void
 }
@@ -263,7 +264,7 @@ export class VueElement
         )
       }
       if (_def.shadowRoot !== false) {
-        this.attachShadow({ mode: 'open' })
+        this.attachShadow({ mode: 'open', ..._def.shadowRootOptions })
         this._root = this.shadowRoot!
       } else {
         this._root = this

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,7 @@ export type VueElementConstructor<P = {}> = {`
`53`	`53`	`export interface CustomElementOptions {`
`54`	`54`	`styles?: string[]`
`55`	`55`	`shadowRoot?: boolean`
	`56`	`+ shadowRootOptions?: ShadowRootInit`
`56`	`57`	`nonce?: string`
`57`	`58`	`configureApp?: (app: App) => void`
`58`	`59`	`}`
`@@ -263,7 +264,7 @@ export class VueElement`
`263`	`264`	`)`
`264`	`265`	`}`
`265`	`266`	`if (_def.shadowRoot !== false) {`
`266`		`- this.attachShadow({ mode: 'open' })`
	`267`	`+ this.attachShadow({ mode: 'open', ..._def.shadowRootOptions })`
`267`	`268`	`this._root = this.shadowRoot!`
`268`	`269`	`} else {`
`269`	`270`	`this._root = this`