как добавить стиль элемента хоста в Google polymer framework


Вот так

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


</polymer-element>

Можно ли добавить стиль элемента ele-polyrow.

1 3

1 ответ:

Конечно. Используйте псевдокласс :host внутри шаблона элемента. Однако есть пара вещей, которые следует отметить:

  • Если вы расширяете встроенный элемент, такой как div, чтобы использовать элемент, который вам нужно использовать <div is="ele-polyrow">, а не просто <ele-polyrow>.
  • Если элемент не содержит конструктора, необходимо добавить noscript атрибут, и полимер автоматически зарегистрирует его для вас.

Сложите эти вещи вместе, и вы получите:

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