如何避免重複陰影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>