From 3262683985b901ac8890ae820233567aef89b4b2 Mon Sep 17 00:00:00 2001 From: Matthias Hryniszak Date: Thu, 27 Feb 2025 16:12:02 +0100 Subject: [PATCH 1/4] feat(runtime-dom): allow specifying additional options for attachShadow close 12964 --- .../runtime-dom/__tests__/customElement.spec.ts | 17 +++++++++++++++++ packages/runtime-dom/src/apiCustomElement.ts | 3 ++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index df438d47eee..3ad9d297783 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -471,6 +471,23 @@ 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 aeeaeec9b9f..c82635575ef 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?: 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 From 6380ae6e9ff620a83887a7fe696faf1b21257fc0 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 28 Feb 2025 00:06:11 +0000 Subject: [PATCH 2/4] [autofix.ci] apply automated fixes --- packages/runtime-dom/__tests__/customElement.spec.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 3ad9d297783..2ca0cda6eb9 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -477,11 +477,14 @@ describe('defineCustomElement', () => { // 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 })] + const E = defineCustomElement( + { + render() { + return [h('input', { tabindex: 1 })] + }, }, - }, { shadowRootOptions: { delegatesFocus: true } }) + { shadowRootOptions: { delegatesFocus: true } }, + ) customElements.define('my-el-with-delegate-focus', E) const e = new E() From f50f53582aa7c3e75b9e87b0520ee02dccf2b86c Mon Sep 17 00:00:00 2001 From: Matthias Hryniszak Date: Fri, 28 Feb 2025 01:24:12 +0100 Subject: [PATCH 3/4] feat(runtime-dom): ensure mode is always 'open' when attaching shadowRoot --- packages/runtime-dom/src/apiCustomElement.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index c82635575ef..0e5c294db92 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -53,7 +53,7 @@ export type VueElementConstructor

= { export interface CustomElementOptions { styles?: string[] shadowRoot?: boolean - shadowRootOptions?: ShadowRootInit + shadowRootOptions?: Omit nonce?: string configureApp?: (app: App) => void } @@ -264,7 +264,7 @@ export class VueElement ) } if (_def.shadowRoot !== false) { - this.attachShadow(extend({ mode: 'open' }, _def.shadowRootOptions)) + this.attachShadow(extend({}, _def.shadowRootOptions, { mode: 'open' }) as ShadowRootInit) this._root = this.shadowRoot! } else { this._root = this From bcf27b2b3072e421d8e919f0d72f50aa788b657d Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 28 Feb 2025 01:47:37 +0000 Subject: [PATCH 4/4] [autofix.ci] apply automated fixes --- packages/runtime-dom/src/apiCustomElement.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 0e5c294db92..cf58901e725 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -264,7 +264,11 @@ export class VueElement ) } if (_def.shadowRoot !== false) { - this.attachShadow(extend({}, _def.shadowRootOptions, { mode: 'open' }) as ShadowRootInit) + this.attachShadow( + extend({}, _def.shadowRootOptions, { + mode: 'open', + }) as ShadowRootInit, + ) this._root = this.shadowRoot! } else { this._root = this