feat(custom-element): allow specifying additional options for `shadowRoot` in custom...

close #12964

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 8b3b440f24f2f31c05a8a5452475aee7d9680c88..36c9e918c9a907ad1b3b962941a156e0861de515 100644 (file)
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -526,6 +526,26 @@ 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', () => {

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 6d6dccc6e908edc1439efe7f5f9217e9ae25a17f..6b1c8f0cae8a91875a783a0df66957970d85a069 100644 (file)
--- 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?: Omit<ShadowRootInit, 'mode'>
   nonce?: string
   configureApp?: (app: App) => void
 }
@@ -263,7 +264,11 @@ export class VueElement
         )
       }
       if (_def.shadowRoot !== false) {
-        this.attachShadow({ mode: 'open' })
+        this.attachShadow(
+          extend({}, _def.shadowRootOptions, {
+            mode: 'open',
+          }) as ShadowRootInit,
+        )
         this._root = this.shadowRoot!
       } else {
         this._root = this