:host styles have no effect - polymer

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>