css - Polymer::host 和::content CSS 选择器的区别

Question

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

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

然而，不仅内容被设置了样式，整个元素(包括“Local DOM N”文本)也被设置了样式。我知道我可以使用包装器 <div>内容周围的元素来约束样式，但我想知道选择器 :host 之间有什么区别和 :host > ::content实际上是，因为后者也适用于整个本地 DOM。

Answer 1

如 documentation 中所述:

Under shady DOM, the <content> tag doesn’t appear in the DOM tree. Styles are rewritten to remove the ::content pseudo-element, and any combinator immediately to the left of ::content.

这意味着 在 shady DOM 下 技术上 :host > ::content 之间没有区别和 :host >