Polymer CSS :: content选择器不起作用-Java 学习之路

我从0.5版开始就没有使用过聚合物，所以我决定再试一次 . 我在使用：host和:: content选择器时遇到了一些麻烦，特别是考虑到我发现：host选择器仅在我的样式标签放在标签之外时才有效 .

无论如何，我的问题是我无法让主机选择器工作，除非我在我的CSS下指定 display: block ：host . 其次，显然没有't a difference between the selectors 2825130 and 2825131 . I' m试图仅在不使用包装元素的情况下对插入到内容标记中的内容进行样式化 .

这是来自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>

这里's how it appears (the gray background doesn't出现在元素内容后面，颜色应该只应用于内容标记）：https://goo.gl/photos/p2EjTSjySCh2srY78

2 回答

3

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

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

回复于 2024-05-12T00:05:26+08:00
0
您的影子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 .
回复于 2024-05-12T00:05:26+08:00

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

2 回答

相关问题