HTML Templates и slots

HTML Templates представляют собой способ определения структуры DOM, которая изначально не рендерится на странице, но может быть использована для создания повторяющихся или динамически управляемых элементов. В Polymer шаблоны играют центральную роль в организации компонентов и позволяют отделить разметку от логики.

Ключевой элемент — <template>:

<template>
  <p>Пример текста внутри шаблона</p>
</template>

При загрузке страницы содержимое <template> не отображается. Polymer расширяет возможности стандартного шаблона за счёт:

  • Data binding — привязка данных к свойствам компонента.
  • Conditional rendering — условный рендеринг с помощью dom-if.
  • List rendering — рендеринг списков с помощью dom-repeat.

Привязка данных внутри шаблонов

Привязка данных позволяет динамически вставлять значения свойств в разметку. В Polymer используется синтаксис двойных фигурных скобок {{property}} для двусторонней привязки и одинарных скобок [[property]] для односторонней.

Пример:

<template>
  <p>Привет, {{name}}!</p>
</template>

Если свойство name изменяется в компоненте, Polymer автоматически обновит DOM, отражая новое значение.

Условный рендеринг: dom-if

dom-if позволяет создавать элементы только при выполнении определённого условия:

<template is="dom-if" if="[[isVisible]]">
  <p>Этот текст появляется только при isVisible = true</p>
</template>

Эффективность заключается в том, что элемент не создаётся в DOM, если условие false, что экономит ресурсы и предотвращает ненужные рендеры.

Рендеринг списков: dom-repeat

Для отображения массивов данных используется dom-repeat:

<template is="dom-repeat" items="[[items]]" as="item">
  <p>[[item.name]]</p>
</template>
  • items — массив данных.
  • as — имя переменной для текущего элемента массива.

Polymer автоматически обновляет список при изменении массива, добавлении или удалении элементов.

Slots: распределение контента

Slots позволяют компоненту Polymer принимать контент извне и вставлять его в определённые места внутри шаблона компонента. Это основной инструмент композиции компонентов.

Простейший slot

<my-element>
  <p>Текст для вставки</p>
</my-element>

Внутри компонента:

<template>
  <slot></slot>
</template>

Контент из внешнего HTML автоматически попадёт на место <slot>.

Named slots

Для более сложного распределения контента используются именованные слоты:

<my-element>
  <h1 slot="title">Заголовок</h1>
  <p slot="content">Основной текст</p>
</my-element>

В шаблоне компонента:

<template>
  <header>
    <slot name="title"></slot>
  </header>
  <section>
    <slot name="content"></slot>
  </section>
</template>

Именованные слоты позволяют создавать гибкие, многослойные компоненты, где разные части контента распределяются в разные места DOM.

Fallback content

Слоты могут иметь контент по умолчанию, который отображается, если внешний контент не передан:

<slot name="content">Текст по умолчанию</slot>

Если элемент с соответствующим slot не передан, отображается текст “Текст по умолчанию”.

Динамическое обновление слотов

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

Shadow DOM и слоты

Slots работают внутри shadow DOM, создавая чёткое разграничение между внутренней структурой компонента и внешним контентом. Взаимодействие через слоты позволяет:

  • Изолировать стили внутреннего компонента.
  • Обеспечить безопасное распределение контента.
  • Гарантировать согласованность поведения компонентов при изменении внешних данных.

Совмещение шаблонов и слотов

Комбинирование <template> с dom-repeat и слотами позволяет строить мощные, переиспользуемые компоненты. Например, список элементов с заголовками и динамическим контентом может быть создан следующим образом:

<template is="dom-repeat" items="[[items]]">
  <my-item>
    <h2 slot="title">[[item.title]]</h2>
    <p slot="content">[[item.description]]</p>
  </my-item>
</template>

Здесь каждая запись массива items превращается в отдельный компонент my-item с распределённым контентом через слоты.

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

Оглавление