Styles applied to custom polymer element only inside an element with layout attribute

Question

I have a custom polymer element inside body element.

If I add styles like width : 100px to the custom element, they are not applied.

But once I add vertical layout to the body element, the rules get applied.

Can somebody please explain why is this happenint, is there a workaround, or am i missing something?

Thank you.

Answer 1

Did you add the block attribute to your custom element?

<polymer-element name="test-element" block>

This example works once you apply block to your custom element.

<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="test-element" noscript block>
  <template>
    some content inside
  </template>
</polymer-element>

<style>
  test-element {
    background-color: red;
    width: 100px;
  }
</style>


<test-element></test-element>