:host styles have no effect

Question

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:

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>

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

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

Answer 1

You should be using dom-module instead of 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>