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

[baiwusanyu-c]

This PR contains two parts.
Based on the existing CE style implementation design, cooperate with plugin-vue (using the styles attribute provided by the compiler) to implement CE's sub-component style injection.
close: #7941
close: #4662
close: #6530

more: vuejs/rfcs#596

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
sfc-playground	⬜️ Ignored (Inspect)		Apr 6, 2023 0:44am

[johnp]

Works similarly well as #6610 and solves #4662. (requires enabling custom element mode in vite-plugin-vue; works for build and HMR)

With this PR, under some circumstances, the style tags are duplicated, see for example:

• https://stackblitz.com/edit/vitejs-vite-9ysxca?file=package.json

• https://stackblitz.com/edit/vitejs-vite-vvgscm?file=package.json

Edit:

• With the example project from When importing component inside custom element, style is discarded  #4662, the <style> tags are not grouped at the top of the shadow root (not sure if this is intended): https://stackblitz.com/edit/vitejs-vite-gwmbmf?file=package.json

• After moving one of the components from that example project into a <div>, the .my-blue style from OtherComponent.vue is duplicated into the position where the .my-green style was, and the .my-green style tag is displaced further below: https://stackblitz.com/edit/vitejs-vite-sjtgkf?file=src%2Fcomponents%2FOtherComponent.vue

• Further modified example which triggers a DOMException: https://stackblitz.com/edit/vitejs-vite-zuqepk (check console; looks like an issue with anchor)

Probably all the same underlying issue, if I had to guess.

[SavkaTaras]

Hello @LinusBorg ,
I hope you are well.

Could you please look at this PR and decide if that's a valid fix for #4662 once you have some time?

Thank you so much,
Taras Savka

[johnp]

Here are the issues as tests (expect the possible style grouping issue):

    test('nested child components w/ fragments in shadow dom should have styles', async () => {
      const GrandChild = {
        styles: [`.my-green { color: green; }`],
        render() {
          return h('p', { class: "my-green" }, "This should be green")
        }
      }
      const Child = {
        components: { GrandChild },
        styles: [`.my-blue { color: blue; }`],
        render() {
          return h('div', {}, [
            h('p', { class: "my-blue" }, "This should be blue"),
            h('div', {}, h(GrandChild))
          ])
        }
      }
      const Foo = defineCustomElement({
        components: { Child },
        styles: [`.my-red { color: red; }`],
        render() {
          return [
            h('p', { class: "my-red" }, "This should be red"),
            h(Child)
          ]
        }
      })
      customElements.define('my-el-with-grandchild-styles', Foo)
      container.innerHTML = `<my-el-with-grandchild-styles></my-el-with-grandchild-styles>`
      await nextTick()

      const el = container.childNodes[0] as VueElement
      const style = el.shadowRoot?.querySelectorAll('style')!
      expect(style.length).toBe(3)
      expect(style[0].textContent).toBe(`.my-red { color: red; }`)
      expect(style[1].textContent).toBe(`.my-blue { color: blue; }`)
      expect(style[2].textContent).toBe(`.my-green { color: green; }`)
    })

    test('deeply nested child components w/ fragments in shadow dom should have styles', async () => {
      const GreatGrandChild = {
        styles: [`.my-grey { color: grey; }`],
        render() {
          return h('p', { class: "my-grey" }, "This should be grey")
        }
      }
      const GrandChild = {
        components: { GreatGrandChild },
        styles: [`.my-green { color: green; }`],
        render() {
          return [
            h('p', { class: "my-green" }, "This should be green"),
            h('span', {}, h(GreatGrandChild))
          ]
        }
      }
      const Child = {
        components: { GrandChild },
        styles: [`.my-blue { color: blue; }`],
        render() {
          return h('div', {}, [
            h('p', { class: "my-blue" }, "This should be blue"),
            h('div', {}, h(GrandChild))
          ])
        }
      }
      const Foo = defineCustomElement({
        components: { Child },
        styles: [`.my-red { color: red; }`],
        render() {
          return [
            h('p', { class: "my-red" }, "This should be red"),
            h(Child)
          ]
        }
      })
      customElements.define('my-el-with-greatgrandchild-styles', Foo)
      container.innerHTML = `<my-el-with-greatgrandchild-styles></my-el-with-greatgrandchild-styles>`
      await nextTick()

      const el = container.childNodes[0] as VueElement
      const style = el.shadowRoot?.querySelectorAll('style')!
      expect(style.length).toBe(4)
      expect(style[0].textContent).toBe(`.my-red { color: red; }`)
      expect(style[1].textContent).toBe(`.my-blue { color: blue; }`)
      expect(style[2].textContent).toBe(`.my-green { color: green; }`)
      expect(style[3].textContent).toBe(`.my-grey { color: grey; }`)
    })

[OBe95]

Just mentioning this bug here, I also reproduce using this PR
Let me know if you want to report this fix here as well :)

[yoyo837]

Can this be merged?

[codspeed-hq]

CodSpeed Performance Report

Merging #7942 will not alter performance

_{Comparing baiwusanyu-c:bwsy/feat/CEChildStyle (1a97321) with main (bae79dd)}

Summary

✅ 53 untouched benchmarks

[yoyo837]

Shadow DOM should support link style.

[yoyo837]

I've been following this PR and thank you for your hard work so much. However, does the vue team have a positive view on this PR?

[lseguin1337]

Hello everyone ✋ I have a simpler solution for those who want to bootstrap their vue app inside a shadowRoot:

here is a simple vitejs plugin that will inject all styles using the adoptedStylesheets API.
Let me know if you face some limitation, and if you need a version for webpack.

https://github.com/lseguin1337/vue-adopted-stylesheets

[matthiasPOE]

ping @LinusBorg

[leonheess]

@yyx990803 please 😭😭

[Shinigami92]

question (if-minor): should this be removed or enabled? Like now it looks like temporary outcommented code that might never be worked on in the future, if not worked on now.