如何避免重复阴影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>