你如何避免在阴影 DOM 中重复样式？

Question

我是网络组件的新手，所以不确定是否有关于这个的简单答案或最佳实践。

如果我想创建一系列具有封装样式的重复元素，如何避免对每个元素重复样式块。

我使用的代码的简化版本是：

<ul id="wrapper"></ul>

<template id="template">
  <style>
    li { color: red }
  </style>

  <li></li>
</template>

<script>
var wrapper = document.getElementById('wrapper');
var tpl = document.getElementById('template');
var shadow = wrapper.createShadowRoot();
var arr = ['a', 'b', 'c'];

for(var i = 0, ii = arr.length; i < ii; i++) {
  tpl.content.querySelector('li').textContent = arr[i];

  var clone = document.importNode(tpl.content, true);

  shadow.appendChild(clone);
}
</script>

我遇到的问题是阴影 DOM 每个 <li> 都有一个重复的样式块，我不确定最好的解决方法。

我试过嵌套模板，要么永远行不通，要么我做的不对。

Answer 1

如何检查样式元素并单独导入它？

<ul id="wrapper"></ul>

<template id="template">
  <style>
    li { color: red }
  </style>

  <li></li>
</template>

<script>
var wrapper = document.getElementById('wrapper');
var tpl = document.getElementById('template').cloneNode(true);
var shadow = wrapper.createShadowRoot();

var style = tpl.content.querySelector('style');
if (style) {
  tpl.content.removeChild(style);
  shadow.appendChild(document.importNode(style, true));
}

var arr = ['a', 'b', 'c'];
for(var i = 0, ii = arr.length; i < ii; i++) {
  tpl.content.querySelector('li').textContent = arr[i];
  shadow.appendChild(document.importNode(tpl.content, true));
}
</script>

Answer 2

Fast-forward 到 2022 年，我们现在有了“可构建的样式表”。参考here。基本上，浏览器足够聪明，可以为页面上的所有 web 组件副本仅使用一个构造的样式表！ :)

引用文章：

Constructable Stylesheets make it possible to define and prepare shared CSS styles, and then apply those styles to multiple Shadow Roots or the Document easily and without duplication. Updates to a shared CSSStyleSheet are applied to all roots into which it has been adopted

你如何避免在阴影 DOM 中重复样式？

How do you avoid repeating styles in shadow DOM?

templatetags

web-component

shadow-dom