<template>

Тег HTML5 template применяется как фрагмент разметки для шаблона на стороне клиента. Стандартный подход DOM, который анализируются в HTML, переходя на страницу не используя нагрузку, но может быть создан позже во время выполнения.

Оглавление
  1. Функция распознавания
  2. Применить тег template
  3. Примеры
  4. Пример сценария
  5. Пример DOM
  6. Поддержка template

Функция распознавания

Чтобы браузер распознал новый элемент template, нужно создать DOM:

function supportsTemplate() {
  return 'content' in document.createElement('template');
}
if (supportsTemplate()) {
  // выполнение
} else {
  // для старого подхода
}

Применить тег template

Тег HTML5 template представляет собой элемент для шаблона в разметке HTML.

Пример, содержание внутри элемента template:

<template id="mytemplate">
  <img src="" alt="great image">
  <div class="comment"></div>
</template>

Тег template может быть размещен в любом месте разметки HTML, и может содержать любой тип контента, который предусмотрен для элементов разметки. Он также может быть как дочерний элемент table или select:

<table>
 <tr>
   <template id="cells-to-repeat">
    <td>часть содержимого</td>
   </template>
 </tr>
</table>

Чтобы использовать тег template необходимо активировать его. В противном случае его содержание никогда не отобразится. Самый простой способ сделать это, путем создания копии содержания с использованием CloneNode (). Где .content является свойством только для чтения, которое ссылается на содержание разметки шаблона DocumentFragment.

var t = document.querySelector('#mytemplate');
t.content.querySelector('img').src = 'logo.png'; //Заполнить src в runtime.
document.body.appendChild(t.content.cloneNode(true));
К началу

Примеры

Примеры применения тега template выполняют действия для содержания.

Пример сценария

Этот пример демонстрирует инертность содержания шаблонов. Сценарий выполняется только после нажатия на кнопку.

<button onclick="useIt()">Применить</button>
<div id="container"></div>
<script>
  function useIt() {
    var content = document.querySelector('template').content;
    var span = content.querySelector('span'); // Обновить что-то в шаблоне DOM.
    span.textContent = parseInt(span.textContent) + 1;
    document.querySelector('#container').appendChild(content.cloneNode(true));
  }
</script>
<template>
  <div>Шаблон: <span>0</span></div>
  <script>alert('Спасибо!')</script>
</template>
К началу

Пример DOM

Многие применяют Shadow DOM к хосту, установив строку разметки InnerHtml:

<div id="host"></div>
<script>
  var shadow = document.querySelector('#host').webkitCreateShadowRoot();
  shadow.innerHTML = '<span>Узел хоста</span>';
</script>

Будет работать напрямую с DOM, добавляя содержимое шаблона в корень:

<template>
<style>
  @host {
    * {
      background: #f8f8f8;
      padding: 10px;
      -webkit-transition: all 400ms ease-in-out;
      box-sizing: border-box;
      border-radius: 5px;
      width: 450px;
      max-width: 100%;
    }
    *:hover {
      background: #ccc;
    }
  }
  div {
    position: relative;
  }
  header {
    padding: 5px;
    border-bottom: 1px solid #aaa;
  }
  h3 {
    margin: 0 !important;
  }
  textarea {
    font-family: inherit;
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid #aaa;
  }
  footer {
    position: absolute;
    bottom: 10px;
    right: 5px;
  }
</style>
<div>
  <header>
    <h3>Добавить комментарии</h3>
  </header>
  <content select="p"></content>
  <textarea></textarea>
  <footer>
    <button>Отправить комментарии</button>
  </footer>
</div>
</template>
<div id="host">
  <p>Инструкция</p>
</div>
<script>
  var shadow = document.querySelector('#host').webkitCreateShadowRoot();
  shadow.appendChild(document.querySelector('template').content);
</script>

Если вы используете modpagespeed, будьте осторожны с этим багом. Шаблоны в которых применяются style scoped, перемещают заголовок CSS переписывая правила PageSpeed.

Будьте осторожны с вложением тега template. Он может вести себя не так, как вы могли бы ожидать.

Например:

<template>
  <ul>
    <template>
      <li>Список</li>
    </template>
  </ul>
</template>
К началу

Поддержка template

Таблица поддержки браузерами: “<template>”