Question

我在使用Polymer 5.5构建的自定义元素上有一些：主机样式的应用程序。现在，我将其转换为Polymer 1.0，但遇到了这个奇怪的问题：

使用：host定义的样式不会应用。出于测试目的，我从文档中采用了以下示例：

<dom-element id="my-element">

<style>
    :host {
        display: block;
        border: 1px solid red;
    }
    #child-element {
        background: yellow;
    }

</style>

<template>
    <div id="child-element">In local DOM!</div>
    <content></content>
</template>

<script>

    Polymer({
        is: 'my-element'
    });

</script>

</dom-element>

当我渲染（最新的chrome）时，它确实有一个黄色背景但没有1px红色边框，它应该有。

知道这里发生了什么吗？没有js警告或其他线索......

Answer 1

您应该使用dom-module代替dom-element：

<dom-module id="my-element">
    <style>
        :host {
            display: block;
            border: 1px solid red;
        }
        #child-element {
            background: yellow;
        }

    </style>

    <template>
        <div id="child-element">In local DOM!</div>
        <content></content>
    </template>

    <script>
        Polymer({
            is: 'my-element'
        });
    </script>
</dom-module>

：主机样式无效

1 个答案: