Question

我从0.5版开始就没有使用过Polymer，所以我决定再给它一个镜头。我在使用：host和:: content选择器时遇到了一些麻烦，特别是考虑到我发现：host选择器仅在我的样式标记位于标记之外时才有效。

无论如何，我的问题是我无法让主机选择器工作，除非我在我的CSS中指定display: block：host。其次，显然选择器“：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

Answer 1

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

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

Answer 2

您的影子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中指定的内容。对于任何可视化组件，您会发现您总是需要在display中指定:host。

Polymer CSS :: content选择器不起作用

2 个答案: