3

我是 Web 组件的新手，所以不确定是否有一个简单的答案或最佳实践。

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

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

<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>

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

我尝试过嵌套模板，但要么永远无法工作，要么我做得不对。

4

2 回答 2

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>

于 2015-11-23T17:06:05.727 回答
0

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

引用文章：

可构造的样式表可以定义和准备共享的 CSS 样式，然后将这些样式轻松地应用到多个 Shadow Roots 或文档，而无需重复。对共享 CSSStyleSheet 的更新将应用于已采用它的所有根

于 2022-02-11T16:15:47.923 回答