Использование шаблона с пользовательскими элементами HTML

Фактически элементы <template> могут быть импортированы из другого документа с помощью импорта HTML вместе с кодом Javascript, который определит пользовательский элемент:

<link rel="import" src="my-custom-element.html">
...
<custom-element></custom-element>

Поэтому его не нужно включать в каждый HTML-документ. Этот пост показывает минимальный пример.

Импорт HTML реализован только в Chrome и Opera. Если вы хотите использовать их вместе с Firefox и Safari, вам нужно использовать полифилл HTML Imports.

С другой стороны, на данный момент Mozilla и Apple не намерены реализовывать HTML-импорт непосредственно в своих браузерах. Поэтому они рекомендуют определять пользовательские элементы с чистыми модулями Javascript (с помощью import или <script src="...">) и вместо этого продвигать строки литералов шаблона, которые предлагают некоторые преимущества (переменные, функции), но иногда более сложны для код в IDE (из-за их строкового представления).

Возможно, в будущем стандартные HTML-модули будут приняты всеми браузерами, и <template> вернется в центр внимания...

Обратите внимание, что без HTML-импорта вы можете импортировать некоторые HTML-документы с помощью fetch():

fetch( "template.html" )
    .then( stream => stream.text() )
    .then( text => 
        customElements.define( "c-e", class extends HTMLElement {
            constructor() {
                super()
                this.attachShadow( { mode: 'open'} )
                    .innerHTML = text
            }
        } )
    )

Обновление 2019

HTML-импорт не будет изначально поддерживаться после Chrome 73. Затем вы должны использовать другие решения, перечисленные выше (polyfill, загрузчик альтернативных модулей, import JS или прямая загрузка с fetch).