:主机样式无效 [英] :host styles have no effect

问题描述

我有一个可唤醒的应用程序，该应用程序在由Polymer 5.5构建的自定义元素上具有一些:host样式.现在，我将其转换为Polymer 1.0，但遇到了一个奇怪的问题:

I had a wokring app with some :host styles on custom elements built with Polymer 5.5. Now, I'm converting this to Polymer 1.0 but run into this weird issue:

不应用用:host定义的样式.为了进行测试，我直接从文档中获取了示例:

Styles defined with :host are not applied. For testing purposes I took the example right from the documentation:

<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的红色边框，应该是红色的.

When I render (latest chrome) it does have a yellow background but does NOT have a 1px red border, which it should have.

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

Any idea what's going on here? There are no js warnings or other clues...

推荐答案

您应该使用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>

这篇关于:主机样式无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！