feat(custom-elemen): ce support child component style tags and attribute settings

packages/runtime-core/src/component.ts

@@ -79,6 +79,7 @@ import {
 } from './compat/compatConfig'
 import { SchedulerJob } from './scheduler'
 import { LifecycleHooks } from './enums'
+import { RendererNode } from './renderer'
 
 export type Data = Record<string, unknown>
 
@@ -402,6 +403,14 @@ export interface ComponentInternalInstance {
   isMounted: boolean
   isUnmounted: boolean
   isDeactivated: boolean
+
+  // Whether the component is a child component of a custom element
+  isCEChild: boolean | null
+  // When the component is a child component of a custom element,
+  // the method of adding style passed down from the ancestor
+  addCEChildStyle:
+    | null
+    | ((styles: string[], anchor?: RendererNode | null) => void)
   /**
    * @internal
    */
@@ -554,6 +563,14 @@ export function createComponentInstance(
     isMounted: false,
     isUnmounted: false,
     isDeactivated: false,
+
+    // Whether the component is a child component of a custom element
+    isCEChild: parent && (parent.isCE || parent.isCEChild),
+    // When the component is a child component of a custom element,
+    // the method of adding style passed down from the ancestor
+    addCEChildStyle:
+      parent && parent.addCEChildStyle ? parent.addCEChildStyle : null,
+
     bc: null,
     c: null,
     bm: null,

packages/runtime-core/src/renderer.ts

@@ -16,6 +16,7 @@ import {
 import {
   ComponentInternalInstance,
   ComponentOptions,
+  ConcreteComponent,
   createComponentInstance,
   Data,
   setupComponent
@@ -708,6 +709,27 @@ function baseCreateRenderer(
     if (needCallTransitionHooks) {
       transition!.beforeEnter(el)
     }
+
+    // The component has styles
+    // and is a child component of a custom element,
+    // then inject the style into the shadow dom
+    if (
+      parentComponent &&
+      parentComponent.parent &&
+      // If the parent component is wrapped by an defineAsyncComponent function,
+      // it will not be processed
+      !(parentComponent.parent.type as ComponentOptions).__asyncLoader
+    ) {
+      const styles =
+        (parentComponent.isCEChild &&
+          (parentComponent.type as ConcreteComponent & { styles?: string[] })
+            .styles) ||
+        null
+      if (parentComponent.addCEChildStyle && styles) {
+        parentComponent.addCEChildStyle(styles, anchor)
+      }
+    }
+
     hostInsert(el, container, anchor)
     if (
       (vnodeHook = props && props.onVnodeMounted) ||

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -547,6 +547,31 @@ describe('defineCustomElement', () => {
       const style = el.shadowRoot?.querySelector('style')!
       expect(style.textContent).toBe(`div { color: red; }`)
     })
+
+    test('child components in shadow dom should have styles', async () => {
+      const Child = {
+        styles: [`.Child { color: blue; }`],
+        render() {
+          return h('div', { class: 'Child' }, 'hello')
+        }
+      }
+      const Foo = defineCustomElement({
+        components: { Child },
+        styles: [`div { color: red; }`],
+        render() {
+          return h('div', {}, ['hello', h(Child)])
+        }
+      })
+      customElements.define('my-el-with-child-styles', Foo)
+      container.innerHTML = `<my-el-with-child-styles></my-el-with-child-styles>`
+      await nextTick()
+
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelectorAll('style')!
+      expect(style.length).toBe(2)
+      expect(style[0].textContent).toBe(`div { color: red; }`)
+      expect(style[1].textContent).toBe(`.Child { color: blue; }`)
+    })
   })
 
   describe('async', () => {
@@ -602,6 +627,35 @@ describe('defineCustomElement', () => {
       )
     })
 
+    test('child components in shadow dom should have styles & async', async () => {
+      const Child = {
+        styles: [`.Child { color: blue; }`],
+        render() {
+          return h('div', { class: 'Child' }, 'hello')
+        }
+      }
+      const Foo = defineCustomElement(
+        defineAsyncComponent(() => {
+          return Promise.resolve({
+            components: { Child },
+            styles: [`div { color: red; }`],
+            render() {
+              return h('div', {}, ['hello', h(Child)])
+            }
+          })
+        })
+      )
+      customElements.define('my-el-with-child-styles-async', Foo)
+      container.innerHTML = `<my-el-with-child-styles-async></my-el-with-child-styles-async>`
+      await new Promise(r => setTimeout(r))
+
+      const el = container.childNodes[0] as VueElement
+      const style = el.shadowRoot?.querySelectorAll('style')!
+      expect(style.length).toBe(2)
+      expect(style[0].textContent).toBe(`div { color: red; }`)
+      expect(style[1].textContent).toBe(`.Child { color: blue; }`)
+    })
+
     test('set DOM property before resolve', async () => {
       const E = defineCustomElement(
         defineAsyncComponent(() => {

packages/runtime-dom/src/apiCustomElement.ts

@@ -21,7 +21,8 @@ import {
   ConcreteComponent,
   ComponentOptions,
   ComponentInjectOptions,
-  SlotsType
+  SlotsType,
+  RendererNode
 } from '@vue/runtime-core'
 import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'
 import { hydrate, render } from '.'
@@ -357,6 +358,9 @@ export class VueElement extends BaseClass {
       vnode.ce = instance => {
         this._instance = instance
         instance.isCE = true
+        // Reference the _addStyles method on the instance,
+        // which will be used to add styles in the child components of the custom element
+        instance.addCEChildStyle = this._addStyles.bind(this)
         // HMR
         if (__DEV__) {
           instance.ceReload = newStyles => {
@@ -406,17 +410,33 @@ export class VueElement extends BaseClass {
     return vnode
   }
 
-  private _applyStyles(styles: string[] | undefined) {
+  private _applyStyles(
+    styles: string[] | undefined,
+    anchor?: RendererNode | null
+  ) {
     if (styles) {
       styles.forEach(css => {
         const s = document.createElement('style')
         s.textContent = css
-        this.shadowRoot!.appendChild(s)
+        if (anchor) {
+          this.shadowRoot!.insertBefore(s, anchor as Node)
+        } else {
+          this.shadowRoot!.appendChild(s)
+        }
         // record for HMR
         if (__DEV__) {
           ;(this._styles || (this._styles = [])).push(s)
         }
       })
     }
   }
+
+  // The method used by custom element child components
+  // to add styles to the shadow dom
+  protected _addStyles(
+    styles: string[] | undefined,
+    anchor: RendererNode | null | undefined
+  ) {
+    this._applyStyles(styles, anchor)
+  }
 }