Question

我正在尝试将CSS样式应用于Polymer元素的本地DOM。具体来说，我想仅将样式应用于本地DOM的<content></content>部分。我尝试了以下元素定义：

<dom-module id="test-element">
  <template>
    <style>
      :host > ::content { font-weight: bold; }
    </style>

    <div>Local DOM 1</div>
    <content></content>
    <div>Local DOM 2</div>
  </template>
</dom-module>

然而，不仅内容是样式化的，而且整个元素包括＆＃34; Local DOM N＆＃34;文本。我知道我可以在内容周围使用包装<div>元素来约束样式，但我想知道选择器:host和:host > ::content实际上有什么区别，因为后者也适用于整个本地DOM。

Answer 1

如documentation中所述：

在shady DOM下，<content>标记不会出现在DOM树中。重写样式是为了删除::content伪元素以及 ::content左侧的任何组合子。

这意味着在阴暗的DOM下在技术上:host > ::content和:host >

之间没有区别

Polymer：之间的区别：host和:: content CSS选择器

1 个答案: