Polymer：：hos​​t和:: content CSS選擇器之間的區別

Question

我正在嘗試將CS​​S樣式應用於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>

但是，不僅內容具有樣式，而且整個元素都包括“ Local DOM N”文本。 我知道我可以在內容周圍使用包裝器<div>元素來限制樣式，但是我想知道選擇器:host和:host > ::content實際上有什么區別，因為后者也適用於整個本地DOM。

Answer 1

如文檔中所述：

在不透明的DOM下， <content>標記不會出現在DOM樹中。 重寫樣式以刪除::content偽元素， 以及緊接 ::content 左側的任何組合器 。

這意味着在可疑的DOM下 ， :host > ::content和:host >在技​​術上沒有區別