我正在尝试将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。 最佳答案
如documentation中所述:
在不透明的DOM下,<content>
标记不会出现在DOM树中。重写样式以删除::content
伪元素,以及紧接在::content
左侧的所有组合器。
这意味着在阴暗的DOM下,:host > ::content
和:host >
在技术上没有区别
关于css - Polymer::host和:: content CSS选择器之间的区别,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33971502/