:host 样式无效

Question

我有一个 wokring 应用程序，在使用 Polymer 5.5 构建的自定义元素上有一些 :host 样式。现在，我将其转换为 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>

:host 样式无效

:host styles have no effect

polymer

polymer-1.0