如何在Google聚合物框架中添加主机元素的样式

Question

像这样

<polymer-element name="ele-polyrow"  extends="div">


</polymer-element>

是否可以添加ele-polyrow元素的样式。

Answer 1

不确定。在元素模板中使用:host伪类。但有几点需要注意：

• 如果扩展内置元素（如div），则使用您需要使用的元素 <div is="ele-polyrow">而非<ele-polyrow>。
• 如果元素不包含构造函数，则需要添加noscript 属性，Polymer会自动为您注册。

将这些东西放在一起，你得到：

<polymer-element name="ele-polyrow"  extends="div" noscript>
  <template>
    <!-- shadow DOM for the element -->
    <style>
      :host {
        outline: 2px solid red;
      }
    </style>
    <!-- display any children -->
    <content></content>
  </template>
</polymer-element>
<div is="ele-polyrow">Hey there polyrow!</div>

• 造型指南：http://www.polymer-project.org/articles/styling-elements.html
• 样式参考：http://www.polymer-project.org/docs/polymer/styling.html