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

close 12964

Author: padcom

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -471,6 +471,23 @@ describe('defineCustomElement', () => {
       container.appendChild(e)
       expect(e.shadowRoot!.innerHTML).toBe('<div></div>')
     })
+
+    // https://github.com/vuejs/core/issues/12964
+    // Disabled because of missing support for `delegatesFocus` in jsdom
+    // https://github.com/jsdom/jsdom/issues/3418
+    // eslint-disable-next-line vitest/no-disabled-tests
+    test.skip('shadowRoot should be initialized with delegatesFocus', () => {
+      const E = defineCustomElement({
+        render() {
+          return [h('input', { tabindex: 1 })]
+        },
+      }, { shadowRootOptions: { delegatesFocus: true } })
+      customElements.define('my-el-with-delegate-focus', E)
+
+      const e = new E()
+      container.appendChild(e)
+      expect(e.shadowRoot!.delegatesFocus).toBe(true)
+    })
   })
 
   describe('emits', () => {

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(extend({ mode: 'open' }, _def.shadowRootOptions))
         this._root = this.shadowRoot!
       } else {
         this._root = this