Шаблоны и стилизация

Polymer использует концепцию Web Components, предоставляя удобные средства для создания повторно используемых элементов. Центральное место занимает элемент <template>, который позволяет описывать структуру компонента, его динамические части и связывать данные с DOM.

Пример базового шаблона:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class MyElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
          color: blue;
        }
        .title {
          font-weight: bold;
        }
      </style>

      <div class="title">[[title]]</div>
      <div class="content">[[content]]</div>
    `;
  }

  static get properties() {
    return {
      title: String,
      content: String
    };
  }
}

customElements.define('my-element', MyElement);

В этом примере:

  • html`` — шаблонная функция, предоставляемая Polymer для декларации разметки.
  • :host — CSS-псевдокласс, применяемый к самому элементу, что позволяет стилизовать его на уровне компонента.
  • [[title]] и [[content]] — привязка данных (data binding) между свойствами компонента и DOM.

Data Binding

Polymer поддерживает два типа привязки данных:

  1. Односторонняя [[prop]] — данные передаются из свойства в шаблон.
  2. Двусторонняя {{prop}} — изменения в DOM автоматически обновляют свойство и наоборот.
<input value="{{username::input}}">
<p>Привет, [[username]]!</p>

Событие input автоматически обновляет свойство username, а привязка [[username]] отображает текущее значение.

Стилизация компонентов

Polymer обеспечивает инкапсуляцию стилей. Основные способы стилизации:

  1. Локальные стили через <style> внутри шаблона. Все правила применяются только к текущему компоненту.

  2. Использование CSS-переменных. Позволяет задавать динамические темы и легко переопределять стили:

:host {
  --main-color: green;
}

.title {
  color: var(--main-color);
}
  1. Миксины CSS. Позволяют создавать наборы правил, которые можно применять к разным компонентам:
:host {
  --card-style: {
    padding: 16px;
    border-radius: 8px;
    background-color: #f0f0f0;
  };
}

.card {
  @apply --card-style;
}

Повторяющиеся шаблоны и условная отрисовка

Для динамического отображения коллекций используется <dom-repeat>:

<dom-repeat items="[[items]]" as="item">
  <template>
    <div>[[item.name]]</div>
  </template>
</dom-repeat>

Для условного отображения применяют <dom-if>:

<dom-if if="[[showContent]]">
  <template>
    <p>Содержимое отображается только если showContent = true</p>
  </template>
</dom-if>

Наследование и переиспользование стилей

Polymer позволяет создавать базовые элементы с общими стилями и расширять их:

class BaseCard extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
          padding: 16px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
      </style>
      <slot></slot>
    `;
  }
}

class UserCard extends BaseCard {
  static get template() {
    return html`
      ${super.template}
      <div class="user-info">[[user.name]]</div>
    `;
  }

  static get properties() {
    return {
      user: Object
    };
  }
}

customElements.define('user-card', UserCard);

Такое наследование позволяет повторно использовать общие стили и расширять функциональность компонентов, сохраняя модульность кода.

Использование слотов

Слоты обеспечивают гибкую вставку контента внутрь компонента:

<my-card>
  <p slot="header">Заголовок карточки</p>
  <p slot="body">Тело карточки</p>
</my-card>

В компоненте:

<slot name="header"></slot>
<slot name="body"></slot>

Это позволяет создавать адаптируемые и настраиваемые компоненты с четкой структурой разметки.

Адаптивная и динамическая стилизация

Для изменения стилей в зависимости от состояния компонента используют свойства и вычисляемые стили:

static get properties() {
  return {
    isActive: {
      type: Boolean,
      reflectToAttribute: true
    }
  };
}

CSS:

:host([isActive]) {
  background-color: yellow;
}

Состояние isActive автоматически отражается на атрибуте DOM, что позволяет применять разные стили в зависимости от состояния элемента.

Итоговые возможности

Polymer предоставляет мощный инструментарий для работы с шаблонами и стилизацией:

  • декларативное связывание данных;
  • условное отображение и повторяющиеся элементы;
  • локальные стили с поддержкой CSS-переменных и миксинов;
  • инкапсуляция и наследование компонентов;
  • гибкая вставка контента через слоты;
  • динамическая стилизация через свойства и отражение атрибутов.

Эти механизмы формируют основу для построения современных, модульных и легко поддерживаемых интерфейсов.

Оглавление