HTML part属性和::part伪元素测试实例页面

CSS代码：

c-e::part(active) { 
    color: deepskyblue; 
}
c-e::part(textspan) { 
    font-size: 20px; 
}

HTML代码：

<template id="c-e-template">
  <p part="textspan active">文字颜色是深天空蓝！</p>
  <p part="textspan">文字颜色是麻瓜黑！</p>
</template>
<c-e></c-e>

JS代码：

let template = document.getElementById('c-e-template');
globalThis.customElements.define('c-e', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content);
  }
});