Атрибут data-* тега <template>
Описание
Атрибуты data-* для элемента <template> позволяют хранить метаданные, связанные с шаблоном, которые могут быть использованы при его клонировании и вставке в DOM. Эти атрибуты особенно полезны для передачи параметров в веб-компоненты.
<template id="user-card" data-default-theme="light" data-version="1.2">
<div class="card">
<h3>User Card</h3>
<slot></slot>
</div>
</template>
<script>
const template = document.getElementById('user-card');
console.log(template.dataset.defaultTheme); // "light"
console.log(template.dataset.version); // "1.2"
</script>
Основные возможности:
| Применение | Преимущества | Пример |
|---|---|---|
| Конфигурация шаблона | Настройка перед использованием | data-visible="true" |
| Версионирование | Отслеживание изменений | data-version="2.1" |
| Динамические параметры | Передача данных в компонент | data-user-role="admin" |
Особенности работы:
- Доступны через свойство
datasetэлемента template - Не копируются автоматически при клонировании содержимого
- Могут быть использованы для предварительной настройки шаблона
- Поддерживаются всеми современными браузерами
Пример с веб-компонентом:
<template id="alert-box" data-type="success">
<style>
.alert { padding: 1rem; }
.alert.success { background: #dff0d8; }
</style>
<div class="alert">
<slot></slot>
</div>
</template>
<script>
customElements.define('alert-box', class extends HTMLElement {
constructor() {
super();
const template = document.getElementById('alert-box');
const type = template.dataset.type || 'info';
const clone = template.content.cloneNode(true);
clone.querySelector('.alert').classList.add(type);
this.attachShadow({mode: 'open'}).appendChild(clone);
}
});
</script>
Рекомендации:
- Используйте для хранения конфигурации шаблонов
- Применяйте kebab-case для имен атрибутов
- Документируйте используемые data-атрибуты
- Для сложных данных используйте JSON в атрибуте
Ограничения:
- Не наследуются клонированным содержимым
- Значения всегда строковые (требуют преобразования)
- Не заменяют props в веб-компонентах
Примечание: Для передачи сложных данных в шаблоны рассмотрите использование JSON: data-config='{"theme":"dark"}'