Будущее стандартов компонентизации — вкус веб-компонентов

исходный адрес

предисловие

В веб-компонентах по-прежнему много контента, и о каждой части есть о чем поговорить Многие иностранные воротилы написали много отличных статей. Как обычно, эта статья — простое понимание общего содержания без углубления, достаточно понять и использовать.

Введение

Сами веб-компонентыНе одинспецификация, а набор из 4 других спецификаций, предложенных W3C. Четыре спецификации:

• HTML Template
• HTML Imports
• Shadow DOM
• Custom Elements

Давайте быстро взглянем на цветы и кратко разберемся в одной из этих четырех вещей.

HTML Template

Предыдущая разработка страницы — это способ поместить шаблон в тег script или скрытый DIV.При использовании InnerHTML вы поместите его в данные. Затем верните его на страницу. Теперь мы можем сохранить его через метку

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

Характерное обнаружение

Чтобы обеспечить обнаружение

function supportsTemplate() {
	return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  	// 检测通过！
} else {
  	// 使用旧的模板技术或库。
}

активировать шаблон

Активируйте шаблон, то есть визуализируйте содержимое в шаблоне. Самый простой способ активировать шаблон — использовать document.importNode() делает глубокую копию .content шаблона. .content — это свойство только для чтения, связанное с DocumentFragment, содержащим содержимое шаблона.

var t = document.querySelector('#mytemplate');
// 在运行时填充 src。
t.content.querySelector('img').src = 'logo.png';

var clone = document.importNode(t.content, true);
document.body.appendChild(clone);

Функции

Обтекание контента с помощью

• Его содержимое инертно до активации. По сути, эта разметка является скрытой DOM, она не отображается.

• Контент в шаблоне не имеет побочных эффектов. Скрипты не запускаются, изображения не загружаются, звук не воспроизводится... пока не будет использован шаблон.

• Контента нет в документации. Использование document.getElementById() или querySelector() на главной странице не вернет дочерние узлы шаблона.

• Шаблоны можно размещать в любом месте, включая

  , или , и любое содержимое, которое может отображаться в любом из вышеперечисленных элементов, может быть помещено в шаблон. Обратите внимание, что "где угодно" означает, что