Веб-компоненты on JSFlow

Custom Elements

Mon, 01 Jan 0001 00:00:00 +0000

Custom Elements #

Custom Elements — часть стандарта веб-компонентов: вы регистрируете новый HTML-тег и связываете его с классом JavaScript. Браузер создаёт экземпляр при разборе разметки <track-card> или через document.createElement('track-card'). Так оформляют переиспользуемые блоки UI — карточку трека, счётчик корзины, бейдж статуса заказа.

Регистрация элемента #

class TrackCard extends HTMLElement {
 connectedCallback() {
 if (this.dataset.rendered) return
 this.dataset.rendered = 'true'

 const title = this.getAttribute('title') ?? 'Без названия'
 const artist = this.getAttribute('artist') ?? ''

 this.innerHTML = `
 <article class="track-card">
 <h3>${title}</h3>
 <p>${artist}</p>
 <button type="button" data-action="play">Слушать</button>
 </article>
 `
 }
}

customElements.define('track-card', TrackCard)

Имя тега обязательно содержит дефис (track-card), чтобы не пересечься со встроенными элементами. Повторный define с тем же именем выбросит ошибку.

Shadow DOM

Mon, 01 Jan 0001 00:00:00 +0000

Shadow DOM #

Shadow DOM — отдельное поддерево узлов, прикреплённое к хост-элементу через attachShadow. Стили и разметка внутри shadow root не смешиваются с остальной страницей: глобальный CSS не протекает внутрь, а внутренние селекторы не «выстреливают» наружу. Это основа инкапсуляции в Custom Elements.

attachShadow #

class DashboardTile extends HTMLElement {
 connectedCallback() {
 const shadow = this.attachShadow({ mode: 'open' })

 shadow.innerHTML = `
 <style>
 :host {
 display: block;
 border-radius: 8px;
 padding: 12px;
 background: var(--tile-bg, #1a1a2e);
 }
 h2 { margin: 0 0 8px; font-size: 1rem; }
 .metric { font-size: 1.5rem; font-weight: 600; }
 </style>
 <h2><slot name="title">Виджет</slot></h2>
 <p class="metric"><slot name="value">—</slot></p>
 `
 }
}

customElements.define('dashboard-tile', DashboardTile)

<dashboard-tile>
 <span slot="title">Активные заказы</span>
 <span slot="value">128</span>
</dashboard-tile>

mode: 'open' даёт доступ к shadow root через element.shadowRoot. В closed снаружи root не виден — только для жёсткой инкапсуляции; отладка сложнее.

template и slots

Mon, 01 Jan 0001 00:00:00 +0000

template и slots #

<template> хранит фрагмент HTML без отображения на странице; slot — место в Shadow DOM, куда проецируется контент из light DOM родителя. Вместе они дают декларативный каркас веб-компонента: один шаблон — много экземпляров с разным наполнением.

Элемент template #

Содержимое <template> лежит в DocumentFragment и не рендерится, пока вы его не клонируете:

<template id="order-row-template">
 <tr>
 <td class="id"></td>
 <td class="status"></td>
 <td class="total"></td>
 </tr>
</template>

const tpl = document.getElementById('order-row-template')

function appendOrderRow(tableBody, order) {
 const row = tpl.content.cloneNode(true)
 row.querySelector('.id').textContent = order.id
 row.querySelector('.status').textContent = order.status
 row.querySelector('.total').textContent = `${order.total} ₽`
 tableBody.append(row)
}

cloneNode(true) копирует всё дерево; исходный template остаётся нетронутым — удобно для списков заказов и строк плейлиста.