: host styles do not work

Question

I had a wokring application with some: host styles on user elements created with Polymer 5.5. Now I am converting this to Polymer 1.0, but I am facing this strange problem:

Styles defined with: host are not applied. For testing purposes, I took an example directly 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>

When I render (the last chrome), it has a yellow background, but does not have a 1px red border, which is what it should be.

Any idea what is going on here? No js warnings or other hints ...

Answer 1

You should use dom-moduleinstead 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>