From 47e628df1ce1914c5677010ad5bddd18d037cb3c Mon Sep 17 00:00:00 2001
From: Matthias Hryniszak <padcom@gmail.com>
Date: Wed, 24 Sep 2025 15:14:54 +0200
Subject: [PATCH] feat(custom-element): allow specifying additional options for
 `shadowRoot` in custom elements (#12965)

close #12964
---
 .../__tests__/customElement.spec.ts           | 20 +++++++++++++++++++
 packages/runtime-dom/src/apiCustomElement.ts  |  7 ++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 8b3b440f2..36c9e918c 100644
--- 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 6d6dccc6e..6b1c8f0ca 100644
--- 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
-- 
2.47.3