[RFC] custom element support child component styles and style attribute settings

[baiwusanyu-c]

• Start Date: 2023-11-06
• Reference Issues: Custom elements support child component style tags core#7941, When importing component inside custom element, style is discarded  core#4662, Option to add nonce value to style tag of vue3 web components core#6530
• Implementation PR: feat(custom-elemen): ce support child component style tags and attribute settings core#7942

Summary

This proposal suggests enhancing the capabilities of custom elements in Vue,
allowing child components of custom elements to attach styles and set attributes of the style tag.
We introduce an internal method called useCEStyleAttrs to dynamically set attributes of the style tag.

• useCEStyleAttrs is a feature exclusive to custom elements.
• When compiling the code, refer to the design of v-bind() in css to compile the runtime code.
• Experimental feature.

Basic example

foo.ce.vue

<script setup>
  import {ref} from "vue";
  import Bar from './bar.vue'
  const nonceFoo = ref('nonce-foo')
</script>
<template>
  <p class="parent"> parent </p>
  <Bar></Bar>
</template>
<style :nonce="nonceFoo">
 .parent {
   color: red
 }
</style>

bar.ce.vue

<script setup>
  import {ref} from "vue";
  const nonceBar = ref('nonce-bar')
</script>
<template>
  <p class="child"> child </p>
</template>
<style :nonce="nonceBar">
 .child {
   color: blue
 }
</style>

Motivation

Most users do not manually define all child components as a custom element, but use the child components as the child elements of a custom element.
Currently vue supports this approach, but it does not handle the style of the child component. It also does not support setting attributes on the style tag,
such as nonce, which does not comply with security standards.
via

Detailed design

Style mounting of child components

We can add a context attribute ceContext to the component instance, which contains methods addCEChildStyle and removeCEChildStyles.
Starting from the custom element component, it is passed to the lower-level component. When the lower-level component is rendered,
addCEChildStyle is called to pass the style of the component to shadowRoot to create the style tag.
So users don't need to make many changes and can just write subcomponents as usual.

About hot update and style tag uninstallation of child components

In ordinary components, style will eventually be compiled into css files, but for custom element,
this will exist in the component code as the styles attribute of the component object.
So for the child components of the custom element component,
the style tag does not need to be uninstalled (normal components do not do this).
But we still need the removeCEChildStyles method, because when component hot updates occur we need to ensure that the old style is correctly unloaded so that the new style tag can be inserted.

Regarding child components being used multiple times and repeated mounting of style tags

We add a new attribute _childStylesSet on the custom element object to record the styles of each of its child components.
_childStylesSet uses the component's css as the key to avoid repeatedly mounting multiple style tags when the same component is used multiple times in custom element.
With one exception, when the component's style block contains dynamic properties,
the styles of each child component need to be mounted. Because the internal state of the component is independent,
the style tag containing dynamic attributes is also independent.

Dynamic style attribute support

This is a scenario that only exists under the custom element component.
In order to achieve style isolation, the custom element component mounts the component's css in the shadowRoot as the style tag,
which prevents users from setting attributes on the style tag.
Consider using useCEStyleAttrs to support this scenario. It is an internal api that is invisible to users.
Users only need to write property bindings on style just like writing templates.
Its basic implementation refers to v-bind() in css.

bar.vue

<script setup>
  import {ref} from "vue";
  const nonceBar = ref('nonce-bar')
  const nonceBar2 = ref('nonce-bar2')
  const nonceBar3 = ref('nonce-bar3')
  const nonceBar4 = ref('nonce-bar4')
  const nonceBar5 = ref('nonce-bar5')
</script>
<template>
  <p class="child"> child </p>
</template>
<style :id="nonceBar"
       id="nonceBar2"
       .id="nonceBar3"
       v-bind:src="nonceBar4"
       v-bind:[nonceBar4]="nonceBar4"
       :[nonceBar5]="nonceBar5"
       :xlink:special="nonceBar5"
>
 .child {
   color: blue
 }
</style>

Compile the completed code

const __sfc__ = {
  __name: 'Comp',
  setup(__props) {

_useCEStyleAttrs(_ctx => ([
  {
   "id": nonceBar.value,
   "src": nonceBar4.value,
   [nonceBar4.value]: nonceBar4.value,
   [nonceBar5.value]: nonceBar5.value,
   "xlink:special": nonceBar5.value,
 },
]))

  const nonceBar = ref('nonce-bar')
  const nonceBar2 = ref('nonce-bar2')
  const nonceBar3 = ref('nonce-bar3')
  const nonceBar4 = ref('nonce-bar4')
  const nonceBar5 = ref('nonce-bar5')

return (_ctx, _cache) => {
  return (_openBlock(), _createElementBlock("p", _hoisted_1, " child "))
}
}

}

Drawbacks

• child component style mounting is based on the styles attribute, so all subcomponents must follow the suffix rules(but it can be improved through feat: added ce child component styles vitejs/vite-plugin-vue#284)
• child component style mounting does not support teleport. teleport will change the structure of shadowRoot, so the style of the child component is still in shadowRoot
• The style attribute syntax is based on v-bind, but does not support binding objects like it does for style and class, which requires further discussion
• Currently, as long as the component style has attributes (scoped and lang will be ignored), useCEStyleAttrs related code will be compiled and generated. But this problem may be able to be optimized

Alternatives

N/A

Adoption strategy

Awaiting further discussion