HTML自定义组件样式表问题

2022-01-29 09:39:57 标签 htmlcssfrontendweb-frontend

我计划使用web组件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…它的性能和优缺点如何?

###你可以通过外部化你的样式表到一个单独的文件来改变你的元素,但你不需要:

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

许多现代浏览器都对标签进行了优化,这些标签要么来自一个公共节点,要么具有相同的文本,以允许它们共享一个单一的后台样式表。通过这种优化,外部和内部样式的性能应该是相似的。

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码