diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index eee2151716e..d9792537628 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -501,6 +501,26 @@ describe('defineCustomElement', () => { container.appendChild(e) expect(e.shadowRoot!.innerHTML).toBe('
') }) + + // 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 56b86a5fd9e..3d19f20d286 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -53,6 +53,7 @@ export type VueElementConstructor

= { export interface CustomElementOptions { styles?: string[] shadowRoot?: boolean + shadowRootOptions?: Omit 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