Советы по работе с полимерами: избегайте ненужных узлов DOM

Ненужные узлы DOM замедляют работу веб-приложений. Следовательно, мы должны избегать таких потерь, когда это возможно.

Я часто замечаю этот антипаттерн в наших полимерных элементах:

<dom-module id="my-element">
  <template>
    <div>
      <span>Element 1</span>
      <span>Element 2</span>
    </div>
  </template>
</dom-module>

div в основном выступает в качестве держателя элементов в шаблоне. Этого держателя div можно легко избежать, стилизовав сам основной элемент:

<dom-module id="my-element">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <span>Element 1</span>
    <span>Element 2</span>
  </template>
</dom-module>

Сложность может возникнуть, если вам нужно установить атрибут держателя для стиля, например:

<dom-module id="my-element">
  <style>
    #holder[has-error] .text {
      color: red;
    }
  </style>
  <template>
    <div id="holder" has-error="[[hasError]]">
      <span class="text">[[text]]</span>
      ...

Но у Polymer есть отличное решение и для таких ситуаций! Просто отразите свойство на самом хосте с помощью reflectToAttribute:

<dom-module id="my-element">
  <style>
    :host[has-error] .text {
      color: red;
    }
  </style>
  <template>
    <span class="text">[[text]]</span>
  </template>
  ...
<script>
(function() {
  Polymer({
    is: "my-element",
    properties: {
      hasError: {
        type: Boolean,
        reflectToAttribute: true
      },
    ...

Удачного кодирования!

Хотите узнать больше о Polymer? Посмотрите все наши Публикации на Medium о Polymer.

Фото: Тим Коллинз