HTML 自定义组件 - 样式表问题答案

【问题标题】：HTML custom components- stylesheet issueHTML 自定义组件 - 样式表问题
【发布时间】：2021-11-10 20:48:59
【问题描述】：

我计划使用 Web Components API 开发 Web 应用程序。不过，我对此有些怀疑。当自定义元素附加到文档时，样式会一次又一次地添加。

我所做的是：

<template id="my-card">
    <style>
        /*some style*/
    </style>
    
    <div class="cardContainer">
        <!--content-->
    </div>
</template>

class MyCard extends HTMLElement {
  this.attachShadow({mode: 'open'})
       .append(document.getElementById('my-card')
                       .content
                       .cloneNode(true))
}

customElements.define('my-card', MyCard)

在文档中添加了几次，结果是这样的：

<my-card>
   #shadow-root
      <style>
         ...
      </style>

      <div class="cardContainer">
         ...
      </div>
</my-card>

<my-card>
   #shadow-root
      <style>
         ...
      </style>

      <div class="cardContainer">
         ...
      </div>
</my-card>

<my-card>
   #shadow-root
      <style>
         ...
      </style>

      <div class="cardContainer">
         ...
      </div>
</my-card>

因此，样式标签被添加到每个影子根中。当添加了数十个自定义组件时，有没有办法防止这种情况发生，或者性能如何受到影响？我应该关心这个吗？

而且，当自定义元素与其他前端框架（如 Vue.js、React、Svelte...）相比时，它的性能和优势/劣势如何？

【问题讨论】：

标签： html css frontend web-frontend

【解决方案1】：

您可以通过将样式表外部化到单独的文件中来更改元素，但您不必这样做：

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#internal_versus_external_styles

许多现代浏览器对从公共节点克隆或具有相同文本的标签进行了优化，以允许它们共享单个支持样式表。通过这种优化，外部样式和内部样式的性能应该相似。

【讨论】：

通过外部化进行更改会导致闪烁。现在好了，谢谢。