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

Question

Я только начал изучать пользовательские элементы HTML, и, прочитав серию вступлений, учебных пособий и документации, я думаю, что у меня есть хорошее представление о том, как это работает, но у меня есть философский вопрос о правильном способе использованияили не используйте тег <template>.

Пользовательские элементы дают вам возможность инкапсулировать новые функциональные возможности, упрощая структуру вашего HTML-документа и позволяя просто вставить тег <my-custom-element>...</my-custom-element> вместо <div class="my-custom-element"><span class="part1">...</span><span class="part2">...</span></div>,

Определение класса для элемента затем устанавливает структуру и функциональные возможности этого элемента.Затем в куче руководств описывается, как использовать <template>...</template> и <slot>...</slot> для настройки содержимого пользовательского элемента.Затем вам нужно будет включить код шаблона в каждый HTML-документ, в котором вы хотите использовать элемент, а не настраивать его в конструкторе класса пользовательского элемента.Разве это не противоречит тому факту, что пользовательские элементы помогают упростить и инкапсулировать функциональность таким образом, чтобы сделать их более переносимыми?Или я неправильно понимаю правильное использование и / или размещение шаблона в документе?

Глядя на SO, наиболее близким к решению этого вопроса является следующий:

Какштамповать шаблон в автономных пользовательских элементах с помощью vanilla js?

Но ответ, по сути, обходит это все вместе и говорит: «Не используйте <template>», и поэтому не совсем проясняет мое замешательство.

Answer 1

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

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

Так что это не такдолжны быть включены в каждый документ HTML. В этом посте показан минимальный пример.

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

С другой стороны, на данный момент 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, альтернативный загрузчик модулей, JS import или прямая загрузка с fetch).