Атрибут id тега <template>
Описание
Атрибут id для элемента <template> задаёт уникальный идентификатор шаблона, который позволяет получить к нему доступ через JavaScript. Это основной способ обращения к шаблону перед его использованием в DOM.
<template id="user-card-template">
<div class="card">
<h3></h3>
<p class="email"></p>
</div>
</template>
<script>
// Получение шаблона по ID
const template = document.getElementById('user-card-template');
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);
</script>
Основные возможности:
| Применение | Преимущества | Пример |
|---|---|---|
| Доступ к шаблону | Получение ссылки в JavaScript | document.getElementById() |
| Связывание компонентов | Идентификация в веб-компонентах | customElements.define() |
| Организация кода | Чёткая структура шаблонов | id="modal-template" |
Особенности работы:
- Должен быть уникальным в пределах документа
- Не отображается в DOM до активации шаблона
- Позволяет получить содержимое через
template.content - Поддерживается всеми современными браузерами
Пример с веб-компонентом:
<template id="alert-template">
<div class="alert">
<slot></slot>
</div>
</template>
<script>
customElements.define('my-alert', class extends HTMLElement {
constructor() {
super();
const template = document.getElementById('alert-template');
this.attachShadow({mode: 'open'})
.appendChild(template.content.cloneNode(true));
}
});
</script>
Рекомендации:
- Используйте семантические имена (например,
user-card-template) - Избегайте общих имён (
template1,temp) - Для нескольких шаблонов применяйте систему именования
- Документируйте назначение шаблонов
Ограничения:
- Дублирование ID вызывает ошибки
- Без JavaScript шаблон бесполезен
- Нельзя использовать в CSS до активации
Примечание: В сложных приложениях рассмотрите использование системы именования шаблонов (например, префиксов) для избежания конфликтов.