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

10-09 15:08
查看更多