首页 文章

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

提问于
浏览 次
1

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

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

css dom polymer

1 回答

  • 1

    如_2825151中所述：

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

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

    回复于

相关问题