JS 中的 CSS 与 Shadow DOM

Question

Web 组件使用 shadow dom 进行样式封装。从规范中您知道 shadow root 内的样式是局部作用域的。当您多次实例化同一个 web 组件时，会对内存产生什么影响？例如：您将自定义按钮 Web 组件实例化 10 次。

例子

#Shadow-root
<style>
.outer {
  border: 2px solid brown;
  border-radius: 1em;
  background: red;
  font-size: 20pt;
  width: 12em;
  height: 7em;
  text-align: center;
}
.inner {
  color: white;
  font-family: sans-serif;
  padding: 0.5em;
}
.name {
  color: black;
  background: white;
  font-family: "Marker Felt", cursive;
  font-size: 45pt;
  padding-top: 0.2em;
}
</style>
<div/>

我可能会导入 style.css 或像上面那样放置一些内联的东西。自定义元素可能有道具，并且基于道具，组件行为会不断变化。现在，如果这样的组件重复 50 次，那么我会看到内联样式也会重复 50 次。浏览器是否在实例之间进行任何优化？

如果样式被重复，那么 js 中的 css 不是比 shadow dom 更好的封装解决方案吗？您可以使用一个不错的 jss 生成插件来真正优化整个 dom 中使用的 css。

Answer 1

如果样式被重复，那么js中的css不是比shadow dom更好的解决方案吗？

无论 CSS 全局放置在何处或在 Shadow DOM 内，它始终应用于所有 DOM 树（因此复制到所有匹配的 DOM 元素）。

当你多次实例化同一个 webcomponent 时，会对内存产生什么影响？

所以我怀疑使用唯一的全局 CSS 标签会优化任何东西。至少发生 50 次时不会。也许是的，有数百人。

它还取决于浏览器的实现，因此非常依赖于供应商，并且可能会随着新浏览器版本的发布而变化。

=> 我只能建议您测试/基准测试您的特定用例。