0

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

4

1 回答 1

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>
于 2015-06-09T15:19:32.630 回答