feat(runtime-core): add 'container' to component instance

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

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)

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 = `<my-el></my-el>`
+ const el = container.childNodes[0] as VueElement
+ const style = el.shadowRoot?.querySelector('style')!
+ expect(style.textContent).toBe(`div { color: red; }`)
+ })
+ })
 })