Статьи

Введение в веб-компоненты

Май 3, 2018

Набор новых технологий

Веб-компоненты

Веб-компоненты — это общий термин для обозначения набора стандартов для веб-разработки (см. Страницу веб-компонентов W3C ). Каждый из них является полезным вкладом в текущий набор инструментов для веб-разработчика. При совместном использовании они образуют совершенно новую парадигму создания веб-приложений.

Веб-компоненты состоят из четырех стандартных предложений, и мы подробнее рассмотрим каждое из них:

  1. Шаблоны
  2. Shadow DOM
  3. Пользовательские Элементы
  4. HTML импорт

1. Шаблоны

Шаблоны определяют повторно используемые части DOM. Все, что находится в шаблоне, не выполняется, пока содержимое шаблона фактически не добавлено в DOM. Это означает, что источники <img> не загружаются, а сценарии не выполняются до тех пор, пока это не будет необходимо, что экономит трафик и обработку. Кроме того, все, что находится в шаблоне, скрыто от querySelector, поэтому сценарии на вашей странице не будут случайно манипулировать исходным содержимым шаблона.

Использовать шаблоны просто. Смотрите следующий пример:

<template id="tpl">
Hello world!
</template>

<script>
var tpl = document.querySelector('#tpl');
tpl.content.querySelector('.name').textContent = "World";
var clone = document.importNode(tpl.content, true);
document.body.appendChild(clone);
</script>

Производит:

Привет мир!

Живой код на jsFiddle (используйте Chrome Canary с включенными функциями веб-платформы)

Подробнее о новом шаблонном теге HTML от Eric Bidelman.

2. Shadow DOM

Shadow DOM обеспечивает инкапсуляцию разметки и стиля.

Это функция, которая использовалась поставщиками браузеров некоторое время. Давайте подумаем о теге <video>. Он состоит из элементов управления, таких как кнопка воспроизведения, индикатор выполнения и регуляторы громкости. Каждый из этих элементов управления реализован в виде тега <div> внутри тега <video>, который фактически недоступен для сценариев на странице, но отображается на экране пользователя.

Shadow DOM — это инструмент, который позволяет веб-разработчику создавать свою собственную скрытую инкапсулированную разметку и стили таким же образом, как
создаются элементы управления <video>.

Простейший пример использования Shadow DOM:

<button>Push me</button>

<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.innerHTML = 'Do not <content></content>!';
</script>

Производит:

Не дави на меня!

Живой код на jsFiddle (используйте Chrome Canary с включенными функциями веб-платформы)

Больше информации о Shadow DOM 101 Доминика Куни.

3. Пользовательские элементы

Пользовательские элементы = Шаблоны + Shadow DOM.

Объединяя мощь шаблонов и Shadow DOM, вы можете создавать первоклассные элементы HTML, которые распространяются из браузера.
Что хорошо в пользовательских элементах, в отличие от, скажем, плагинов jQuery, так это то, что, будучи первоклассными членами DOM, пользовательские элементы могут реагировать на события жизненного цикла DOM. Это позволяет им иметь определенное поведение при добавлении в DOM, изменении их атрибутов или удалении из DOM.

Простой пользовательский элемент может выглядеть так:

<template id="myGravatarTemplate">
    <img>
</template>
<my-gravatar email="[email protected]"></my-gravatar>

<script>
function updateImg(img, email) {
    img.setAttribute("src", "//www.gravatar.com/avatar/" + SparkMD5.hash(email));
}

var MyGravatarElementPrototype = Object.create(HTMLElement.prototype);
MyGravatarElementPrototype.attributeChangedCallback = function (attributeName, oldVal, newVal) {
    if (attributeName == "email") {
        updateImg(this.shadowRoot.querySelector('img'), newVal);
    }
};
MyGravatarElementPrototype.createdCallback = function () {
    var t = document.querySelector('#myGravatarTemplate');
    var clone = document.importNode(t.content, true);
    updateImg(clone.querySelector('img'), this.getAttribute("email") || "");
    this.createShadowRoot().appendChild(clone);
};

var MyGravatarElement = document.registerElement('my-gravatar', {
    prototype: MyGravatarElementPrototype
});
</script>

Производит:

Альберт

Живой код на jsFiddle (используйте Chrome Canary с включенными функциями веб-платформы)

Подробнее о пользовательских элементах — определение новых элементов в HTML Эриком Бидельманом.

4. Импорт HTML

Импорт загружает внешние ресурсы, такие как шаблоны или пользовательские элементы.

Предполагая, что приведенное выше определение пользовательского элемента содержится в файле my-gravatar.html, следующий код выведет изображение аватара на экран:

<link rel="import" href="my-gravatar.html">
<my-gravatar email="[email protected]"></my-gravatar>

Импортированные файлы HTML могут содержать шаблоны, таблицы стилей и сценарии. Они выполняются при загрузке импорта.

дальнейшее чтение

These are just the fundamentals of Web Components. So far, I have only presented usage of native APIs already implemented in Google Chrome Canary. With Polymer, the same code will work in any modern browser and may be simplified with some powerful syntactic sugar. I will cover this in upcoming blog posts.

38
Share: