我从0.5版开始就没有使用过Polymer,所以我决定再次尝试一下。我在使用:host和:: content选择器时遇到了一些麻烦,特别是考虑到我发现:host选择器仅在将样式标签放置在标签之外时才起作用。
无论如何,我的问题是,除非在CSS中的:host下指定display: block
,否则我无法使主机选择器正常工作。其次,选择器“:host”和“:host :: content”之间显然没有区别。我正在尝试仅设置样式的内容,该内容插入到内容标签中而不使用包装元素。
这是我来自custom-element.html的代码:
<dom-module id="custom-element">
<style>
/* Demonstrating how to specify inserted content
any content added here is styled
*/
:host ::content
{
color: green;
}
/* This CSS targets the custom-element tag itself */
:host
{
padding: 4px;
background-color: gray;
}
</style>
<template>
<!-- Title will be placed here before the content -->
<h2 id="title">{{title}}</h2>
<!-- Any content inside the tag will be placed here -->
<content></content>
</template>
....
这是在index.html中使用它的相关位置:
<!-- Auto-binding templates -->
<template id="t" is="dom-bind">
<h1>Your input was <span>{{inputValue}}</span></h1>
<br>
<input is="iron-input" bind-value="{{inputValue}}">
<input type="button" value="Add to list" onClick="pushItem()">
<ul>
<!-- Repeating templates -->
<!-- Here, the items attribute specifies the array of items to bind to. -->
<template id="repeatingList" is="dom-repeat" items="{{listItems}}">
<!-- This demonstrates that we can find the index and data for every item in the specified array -->
<li>Array index <span>{{index}}</span>- <span>{{item}}</span></li>
</template>
</ul>
<br>
<custom-element title="{{inputValue}}"><p>Lorem ipsum!</p></custom-element>
</template>
它的显示方式如下(灰色背景不会出现在元素内容后面,而颜色只能应用于内容标签):https://goo.gl/photos/p2EjTSjySCh2srY78
最佳答案
来自https://www.polymer-project.org/1.0/docs/devguide/styling.html#styling-distributed-children-content
您必须在:: content伪元素的左侧有一个选择器
关于javascript - Polymer CSS::内容选择器不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31737096/