仅在具有布局属性的元素内应用于自定义聚合物元素的样式

Question

我在主体元素内有一个自定义聚合物元素。

如果我将 width : 100px 之类的样式添加到自定义元素，它们将不会应用。

但是一旦我将 vertical layout 添加到 body 元素，规则就会得到应用。

有人可以解释为什么会这样吗，有没有解决方法，或者我错过了什么？

谢谢。

Answer 1

您是否将 block 属性添加到自定义元素中？

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

一旦您将块应用到您的自定义元素，此示例就有效。

<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>

仅在具有布局属性的元素内应用于自定义聚合物元素的样式

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

javascript

css

polymer

web-component

custom-element