Added custom element's unique component option ceStylesAttrs

[baiwusanyu-c]

• Start Date: 2023-10-27
• Reference Issues: #6530
• Implementation PR: feat(custom-elemen): ce support child component style tags and attribute settings core#7942

Summary

When users use custom element to build elements, their styles are processed by the vue runtime and injected into shadowRoot. This causes some users to encounter difficulties when they want to set specific attributes on the style tag, just like in #6530

Basic example

<script setup lang="ts">
defineOptions({
  ceStylesAttrs: [
    {
      'nonce': 'nonce'
    },
  ]
})
</script>
<template>
  <div class="app">
   app
  </div>
</template>
<style scoped>
.app {
    color: #ff12df;
}
</style>

result：

<my-el>
  #shadow-root(open)
    <style nonce="nonce">
      .app {
          color: #ff12df;
      }
    </style>
</my-el>

<script setup lang="ts">
defineOptions({
  ceStylesAttrs: [
    'nonce1',
    {
      'nonce2': 'nonce2'，
      'nonce2': 'nonce2'
    },
  ]
})
</script>
<template>
  <div class="app app2">
   app
  </div>
</template>
<style scoped>
.app {
    color: #ff12df;
}
.app2 {
    color: #ff12df;
}
</style>

result：

<my-el>
  #shadow-root(open)
    <style nonce2="nonce2" nonce3="nonce3">
      .app2 {
          color: #ff12df;
      }
    </style>
   <style nonce1>
      .app {
          color: #ff12df;
      }
    </style>
</my-el>

Detailed design

• The ceStylesAttrs is a custom element only feature.
• ceStylesAttrs is an array. The order of its elements corresponds to the order of the style tags in SFC, and its content is set as an attribute on the style tag.
• When the element of the ceStylesAttrs array is a string, it will be used as the attribute name
• When the elements of the ceStylesAttrs array are objects, each field is used as an attribute name, and the value corresponding to the field is used as the attribute value.

Signature

{
    ceStylesAttrs?: Array<string | Record<string, string | number>>
}