Question

Webcomponents使用shadow dom进行样式封装。从规范中可以知道，阴影根内部的样式是局部范围的。当您多次实例化同一个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是否比阴影dom更好的封装解决方案？您可以使用一个不错的jss生成插件来真正优化整个dom中使用的css thats。

Answer 1

如果样式重复，那么js中的css是否比阴影dom更好的封装解决方案？

无论CSS全局放置在Shadow DOM内还是放置在Shadow DOM内，始终将其应用于所有DOM树（并因此被复制到所有匹配的DOM元素上）。

当您多次实例化同一个Web组件时，对内存有什么影响？

因此，我怀疑使用唯一的全局CSS标签会优化任何内容。至少没有发生50次。也许有数百个。

此外，它还取决于浏览器的实现，因此强制性将取决于供应商，并且随着新浏览器版本的发布，时间可能会有所不同。

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

JS中的CSS与Shadow DOM

1 个答案: