Тег HTML5 <template>

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

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

Чтобы браузер распознал новый элемент 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