Javascript 聚合CSS:：内容选择器不工作

我从0.5版开始就没用过聚合物，所以我决定再试试。我在使用：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>
....

/*演示如何指定插入的内容
这里添加的任何内容都是样式化的
*/
：主机：：内容
{
颜色：绿色；
}
/*此CSS以自定义元素标记本身为目标*/
：主持人
{
填充：4px；
背景颜色：灰色；
}
{{title}}
....

以下是在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>

您的输入是{{inputValue}}



数组索引{index}}-{item}



洛雷姆·伊普苏姆

下面是它的显示方式（灰色背景不会显示在元素内容后面，颜色应该只应用于内容标签）：

From

在：：content伪元素的左边必须有一个选择器

从

在：：content伪元素的左边必须有一个选择器

从

在：：content伪元素的左边必须有一个选择器

从

在：：content伪元素的左边必须有一个选择器

---

阴影DOM样式应该位于

标记内

：：内容

不会直接映射到元素，因此直接应用到元素的样式将被忽略。相反，它允许您覆盖内容内的样式

因此：

：主机{背景色：灰色；}/*样式*/
：host：：content{color:green；}/*不执行任何操作*/
：host:：content>p{color:green；}/*覆盖Lorem ipsum
 绿色*/

---

最后请注意，

本身没有默认样式-它只有您在

:host

中指定的样式。对于任何可视组件，您都会发现几乎总是需要在

:host

中指定

显示

，您的阴影DOM样式应该在

标记中

：：内容

不会直接映射到元素，因此直接应用到元素的样式将被忽略。相反，它允许您覆盖内容内的样式

因此：

：主机{背景色：灰色；}/*样式*/
：host：：content{color:green；}/*不执行任何操作*/
：host:：content>p{color:green；}/*覆盖Lorem ipsum
 绿色*/

---

最后请注意，

本身没有默认样式-它只有您在

:host

中指定的样式。对于任何可视组件，您都会发现几乎总是需要在

:host

中指定

显示

，您的阴影DOM样式应该在

标记中

：：内容

不会直接映射到元素，因此直接应用到元素的样式将被忽略。相反，它允许您覆盖内容内的样式

因此：

：主机{背景色：灰色；}/*样式*/
：host：：content{color:green；}/*不执行任何操作*/
：host:：content>p{color:green；}/*覆盖Lorem ipsum
 绿色*/

---

最后请注意，

本身没有默认样式-它只有您在

:host

中指定的样式。对于任何可视组件，您都会发现几乎总是需要在

:host

中指定

显示

，您的阴影DOM样式应该在

标记中

：：内容

不会直接映射到元素，因此直接应用到元素的样式将被忽略。相反，它允许您覆盖内容内的样式

因此：

：主机{背景色：灰色；}/*样式*/
：host：：content{color:green；}/*不执行任何操作*/
：host:：content>p{color:green；}/*覆盖Lorem ipsum
 绿色*/

---

最后请注意，

本身没有默认样式-它只有您在

:host

中指定的样式。对于任何可视组件，您都会发现几乎总是需要在

:host

中指定

显示
，您的链接已断开。您的链接已断开。您的链接已断开。您的链接已断开。
:host { background-color: gray; } /* Styles <custom-element> */

:host ::content { color: green; } /* Does nothing */

:host ::content > p { color: green; } /* Overrides the <p>Lorem ipsum!</p> to be green */