feat(custom-element): allow specifying additional options for `shadowRoot` in custom elements (#12965)

close #12964

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', () => {

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