Polymer CSS ::内容选择器不起作用答案

【问题标题】：Polymer CSS ::content selector not workingPolymer CSS ::内容选择器不起作用
【发布时间】：2015-07-31 02:18:01
【问题描述】：

我从 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

【问题讨论】：

您的链接已损坏。

标签： javascript css polymer web-component shadow-dom

【解决方案1】：

来自https://www.polymer-project.org/1.0/docs/devguide/styling.html#styling-distributed-children-content

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

【讨论】：

【解决方案2】：

你的 shadow DOM 样式应该在你的 <template> 标签内。

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

所以：

: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 */

最后请注意，<custom-element> 没有自己的默认样式 - 它只有您在 :host 中指定的样式。对于任何可视化组件，您会发现几乎总是需要在 :host 中指定 display。

【讨论】：