Question

我已经阅读了有关Web组件的所有文档，并且根据标准，不可能将隔离的CSS样式（阴影）应用于用户在自定义元素（轻DOM）内输入的元素，即内容用户在slot元素中添加的内容，如下所示：

<! - Custom element ->
    <index-book>
     <slot>

       <! - Light DOM here / This content was introduced by the user ->
       <div class = "container">
         <span class = "section"> Section title ... </ span>
         <ul class = "sections">
           <li> ... </ li>
           <li> ... </ li>
           <li> ... </ li>
         </ ul>
       </ div>

     </ slot>
    </ index-book>

实际上，使用CSS :: slotted（）的伪元素类只能将样式应用于slot元素的第一个直接子元素，即div.container，而不是它的子元素。

我已经得出两个结论，或者如果你可以将阴影样式应用于DOM灯的整个元素结构，我不知道如何，或者第二个选项是不允许用户将内容输入到像前一个例子中那样具有多级的槽，div中的div ...

如果正确的答案是第二个答案，我应该怎么做才能让用户在自定义元素中插入内容，最终结果与上面显示的示例相同或相似（尝试创建自定义图书索引元素）并且可以在自定义元素的DOM树中应用孤立的样式。

我必须提到我没有使用Polymer或任何其他库来开发这个自定义元素。

非常感谢！

Answer 1

根据web fundamentals：

<name-badge>
  <h2>Eric Bidelman</h2>
  <span class="title">
    Digital Jedi, <span class="company">Google</span>
  </span>
</name-badge>

<style>
::slotted(h2) {
  margin: 0;
  font-weight: 300;
  color: red;
}
::slotted(.title) {
   color: orange;
}
/* DOESN'T WORK (can only select top-level nodes).
::slotted(.company),
::slotted(.title .company) {
  text-transform: uppercase;
}
*/
</style>
<slot></slot>

所以我想你在这里运气不好。

然而，如果它的光线可能你可以直接设计它或将它包装在另一个自定义元素中吗？

将CSS样式应用于自定义元素HTML5

1 个答案: