我正在尝试将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。

最佳答案

documentation中所述:


  在不透明的DOM下,<content>标记不会出现在DOM树中。重写样式以删除::content伪元素,以及紧接在::content左侧的所有组合器。


这意味着在阴暗的DOM下,:host > ::content:host >在技术上没有区别

关于css - Polymer::hos​​t和:: content CSS选择器之间的区别,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33971502/

10-14 14:51
查看更多