web-component - 如何避免在影子 DOM 中重复样式？

Question

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

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

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

<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> 都有一个重复的样式 block 。 ，我不确定最好的解决方法。

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

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>