From 3ae17261d053c59f4553ca5969cbfb24e88c9ffc Mon Sep 17 00:00:00 2001 From: Qijia Liu Date: Fri, 28 Apr 2023 10:40:35 -0400 Subject: [PATCH 1/3] feat(runtime-core): add 'container' to component instance close #6113 --- packages/runtime-core/src/component.ts | 5 +++++ packages/runtime-core/src/renderer.ts | 3 +++ .../__tests__/customElement.spec.ts | 21 +++++++++++++++++++ 3 files changed, 29 insertions(+) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 57a53a39b76..e53b067905b 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -224,6 +224,10 @@ export interface ComponentInternalInstance { parent: ComponentInternalInstance | null root: ComponentInternalInstance appContext: AppContext + /** + * The DOM element that app is mounted to, or shadowRoot of custom element. + */ + container: any /** * Vnode representing this component in its parent's vdom tree */ @@ -497,6 +501,7 @@ export function createComponentInstance( type, parent, appContext, + container: null, // will be set synchronously before setup root: null!, // to be immediately set next: null, subTree: null!, // will be set synchronously right after creation diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index 383e17fb0f5..7b99ec1afb9 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -1201,6 +1201,7 @@ function baseCreateRenderer( parentComponent, parentSuspense )) + instance.container = container if (__DEV__ && instance.type.__hmrId) { registerHMR(instance) @@ -2237,6 +2238,8 @@ function baseCreateRenderer( invokeArrayFns(bum) } + instance.container = null + if ( __COMPAT__ && isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 6ccf02c4fa6..3ec74986eab 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -2,6 +2,7 @@ import { defineAsyncComponent, defineComponent, defineCustomElement, + getCurrentInstance, h, inject, nextTick, @@ -693,4 +694,24 @@ describe('defineCustomElement', () => { ) }) }) + + describe('shadowRoot', () => { + // # 6113 + test('shadowRoot accessible for css-in-js', () => { + const Foo = defineCustomElement({ + setup() { + const ins = getCurrentInstance()! + const style = document.createElement('style') + style.innerHTML = `div { color: red; }` + ins.container.appendChild(style) + return () => h('div', 'hello') + } + }) + customElements.define('my-el', Foo) + container.innerHTML = `` + const el = container.childNodes[0] as VueElement + const style = el.shadowRoot?.querySelector('style')! + expect(style.textContent).toBe(`div { color: red; }`) + }) + }) }) From 9bab0a5779ff850fc7050d12e4032aeab6b8a464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Sat, 2 Sep 2023 11:30:45 -0500 Subject: [PATCH 2/3] Update packages/runtime-dom/__tests__/customElement.spec.ts --- packages/runtime-dom/__tests__/customElement.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 3ec74986eab..7e5a12582d9 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -696,7 +696,7 @@ describe('defineCustomElement', () => { }) describe('shadowRoot', () => { - // # 6113 + // #6113 test('shadowRoot accessible for css-in-js', () => { const Foo = defineCustomElement({ setup() { From bf0795a68a6b9fdcf33d9bc59e44142be2591e3c Mon Sep 17 00:00:00 2001 From: Qijia Liu Date: Sat, 23 Sep 2023 00:49:17 -0400 Subject: [PATCH 3/3] feat(runtime-core): restrict setting container for CE MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 白雾三语 <32354856+baiwusanyu-c@users.noreply.github.com> --- packages/runtime-core/src/component.ts | 4 ++-- packages/runtime-core/src/renderer.ts | 2 +- packages/runtime-dom/__tests__/customElement.spec.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index e53b067905b..93169008fe7 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -225,9 +225,9 @@ export interface ComponentInternalInstance { root: ComponentInternalInstance appContext: AppContext /** - * The DOM element that app is mounted to, or shadowRoot of custom element. + * ShadowRoot of custom element if it is */ - container: any + container: ShadowRoot | null /** * Vnode representing this component in its parent's vdom tree */ diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index 7b99ec1afb9..ef1e24cc9b1 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -1201,7 +1201,7 @@ function baseCreateRenderer( parentComponent, parentSuspense )) - instance.container = container + instance.isCE && (instance.container = container as ShadowRoot) if (__DEV__ && instance.type.__hmrId) { registerHMR(instance) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 7e5a12582d9..5b76952d3f6 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -703,7 +703,7 @@ describe('defineCustomElement', () => { const ins = getCurrentInstance()! const style = document.createElement('style') style.innerHTML = `div { color: red; }` - ins.container.appendChild(style) + ins.container!.appendChild(style) return () => h('div', 'hello') } })