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

Бен Фаррелл
Веб-компоненты в действии

Web Components 
in Action
BEN FARRELL
Foreword by Gray Norton

Веб-компоненты 
в действии
БЕН ФАРРЕЛЛ 
Предисловие Грея Нортона
Москва, 2020

УДК	 004.42
ББК	 32.972
Ф25
Фаррелл Б.
Ф25	 Веб-компоненты в действии / пер. с англ. Д. А. Беликова. – М.: ДМК Пресс, 
2020. – 462 с.: ил. 
ISBN 978-5-97060-856-2
Один из основных факторов, способствующих трансформации интернета в последние годы, – широкое внедрение разработки пользовательского интерфейса на 
основе компонентов. В этой книге подробно описываются рабочие процессы, которые 
дают вам полный контроль над стилями и поведением компонентов и существенно 
упрощают их создание, совместное и повторное использование в проектах.
В первой части рассмотрено получение простого компонента с нуля. Вторая часть 
посвящена улучшению организации проекта. В третьей части освещаются принципы 
совместной работы с несколькими компонентами, позволяющей решать более сложные задачи. Для всех примеров предоставляется исходный код.
Издание предназначено для веб-разработчиков, имеющих опыт работы с HTML, 
CSS и JavaScript.
УДК  004.42
ББК  32.972
Original English language edition published by Manning Publications USA, USA. Copyright © 2019 
by Manning Publications Co. Russian-language edition copyright © 2020 by DMK Press. All rights 
reserved.
Все права защищены. Любая часть этой книги не может быть воспроизведена в какой 
бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.
ISBN 978-1-617-29577-5 (англ.)	
Copyright © 2019 by Manning Publications Co.
ISBN 978-5-97060-856-2 (рус.)	
©  Оформление, издание, перевод, ДМК Пресс, 2020

Моей удивительной жене,  
которая пишет гораздо более захватывающие книги,  
по сравнению с книгами о веб-разработке,  
посвященные драконам и катастрофам

Оглавление
 Часть I	   Первые шаги............................................................................................26
	 1	   Фреймворк без фреймворка...................................................................27
	 2	   Ваш первый веб-компонент...................................................................45
	 3	   Делаем так, чтобы ваш компонент можно было использовать  
	
	     повторно..................................................................................................75
	 4	   Жизненный цикл компонента.............................................................106
	 5	   Реализация более качественного веб-приложения  
	
	     с помощью модулей..............................................................................128
	 Часть II	   Способы улучшить рабочий процесс вашего компонента.................154
	 6	   Управление разметкой..........................................................................155
	 7	   Шаблонирование контента с помощью HTML....................................182
	 8	   Теневая модель DOM.............................................................................206
	 9	   Shadow CSS.............................................................................................222
	10	   Проблемы Shadow CSS..........................................................................251
	Часть III	   Объединяем компоненты воедино......................................................274
	11	   Реальный компонент пользовательского интерфейса.......................275
	12	   Сборка и поддержка старых браузеров...............................................309
	13	   Тестирование компонентов.................................................................341
	14	   События и поток данных приложения................................................363
	15	   Сокрытие сложностей...........................................................................396

Содержание
Предисловие..................................................................................................15
От автора...................................................................................................17
Благодарности.............................................................................................19
Об этой книге...............................................................................................20
Об авторе.....................................................................................................24
Об иллюстрации на обложке.......................................................................25
ЧАСТЬ I	
ПЕРВЫЕ ШАГИ.................................................................26
1	
Фреймворк без фреймворка........................................................27
1.1	
Что такое веб-компоненты?........................................................30
1.1.1	 Календарь с возможностью выбора даты..............................30
1.1.2	 Теневая модель DOM...............................................................31
1.1.3	 Что имеют в виду, когда говорят «веб-компоненты»?.........33
1.1.4	 Проблемная история импорта HTML....................................33
1.1.5	 Библиотеки Polymer и X-Tag...................................................35
1.1.6	 Современные веб-компоненты...............................................36
1.2	
Будущее веб-компонентов..........................................................37
1.3	
За пределами одного компонента.............................................38
1.3.1	 Веб-компоненты как и любой другой элемент DOM.............39
1.3.2	 От отдельного компонента к приложению...........................40
1.4	
Ваш проект, ваш выбор.................................................................43
Резюме........................................................................................................43
2	
Ваш первый веб-компонент.......................................................45
2.1	
Знакомство с HTMLElement.........................................................46
2.1.1	 Ускоренный курс по наследованию..........................................46
2.1.2	 Наследование в ваших любимых элементах...........................47

Содержание
Правила именования вашего элемента....................................48
2.3	
Определение вашего пользовательского элемента  
	
(и обработка столкновений)........................................................50
2.4	
Расширение HTMLElement для создания логики  
	
пользовательского компонента..................................................51
2.5	
Использование вашего пользовательского элемента  
	
на практике.....................................................................................56
2.6	
Создание (полезного) первого компонента.............................59
2.6.1	 Настраиваем свой веб-сервер................................................59
2.6.2	 Пишем свой HTML-тег...........................................................61
2.6.3	 Создаем свой класс..................................................................62
2.6.4	 Добавляем содержимое в наш компонент.............................63
2.6.5	 Добавляем стили....................................................................64
2.6.6	 Логика компонента................................................................65
2.6.7	 Добавляем интерактивности...............................................67
2.6.8	 Последние штрихи..................................................................69
2.6.9	 Улучшение компонента..........................................................73
2.7	
Примечания относительно поддержки в браузерах..............73
Резюме........................................................................................................74
3	
Делаем так, чтобы ваш компонент можно  
	
было использовать повторно...................................................75
3.1	
Реальный компонент....................................................................76
3.1.1	 Пример использования поиска в 3D........................................76
3.1.2	 Начнем с HTTP-запроса..........................................................77
3.1.3	 Обертываем свою работу в пользовательский компонент....77
3.1.4	 Отображение результатов поиска........................................80
3.1.5	 Стилизация нашего компонента...........................................81
3.2	
Делаем наш компонент настраиваемым..................................83
3.2.1	 Создание API компонента с помощью устанавливающих  
	
методов..................................................................................84
3.2.2	 Используя наш API извне........................................................84
3.3	
Использование атрибутов для конфигурирования................86
3.3.1	 Аргумент против API компонента.......................................86
3.3.2	 Реализация атрибутов...........................................................87
3.3.3	 Чувствительность к регистру символов...............................88
3.4	
Прослушивание изменений в атрибутах..................................89
3.4.1	 Добавление поля ввода текста..............................................89
3.4.2	 Метод attributeChangedCallback.............................................90
3.4.3	 Атрибуты, за которыми ведется наблюдение......................91
3.5	
Делаем другие вещи еще более настраиваемыми..................94
3.5.1	 Использование метода hasAttribute для проверки  
	
существования атрибута......................................................94
3.5.2	 Полная настройка URL-адреса HTTP-запроса  
	
для разработки.......................................................................95

Содержание
3.5.3	 Руководство по передовым методикам.................................96
3.5.4	 Избегайте использования атрибутов для расширенных  
	
данных.....................................................................................96
3.5.5	 Отражение свойств и атрибутов.........................................97
3.6	
Обновление компонента-ползунка...........................................99
Резюме......................................................................................................105
4	
Жизненный цикл компонента................................................106
4.1	
API веб-компонентов..................................................................106
4.2	
Обработчик connectedCallback..................................................107
4.2.1	 Конструктор в сравнении с методом connectedCalback......111
4.3	
Остальные методы жизненного цикла веб-компонента....114
4.3.1	 Метод disconnectedCallback..................................................114
4.3.2	 Метод adoptedCallback.........................................................117
4.4	
Сравнение с жизненным циклом React..................................118
4.5	
Сравнение с жизненным циклом игрового движка.............120
4.6	
Жизненный цикл компонента v0.............................................126
Резюме......................................................................................................127
5	
Реализация более качественного веб-приложения  
	
с помощью модулей........................................................................128
5.1	
Использование тега <script> для загрузки ваших  
	
веб-компонентов.........................................................................129
5.1.2	 Крошечные сценарии более организованы,  
	
но усугубляют проблему со ссылками...................................131
5.1.3	 Включение стилей CSS для самостоятельных  
	
компонентов.........................................................................132
5.1.4	 Ад зависимостей...................................................................134
5.2	
Использование модулей для решения проблем  
	
зависимости..................................................................................134
5.2.1	 Создание музыкального инструмента  
	
с использованием веб-компонентов и модулей JS................135
5.2.2	 Начинаем с самого маленького компонента........................138
5.2.3	 Импорт и вложение веб-компонента в веб-компонент.....139
5.2.4	 Использование веб-компонента для обертки всего  
	
веб-приложения....................................................................141
5.3	
Добавляем интерактивности в наш компонент...................143
5.3.1	 Прослушивание событий движения мыши...........................144
5.3.2	 Передача данных в дочерние компоненты...........................144
5.3.3	 Заставляем наши компоненты вибрировать  
	
с помощью CSS......................................................................146
5.4	
Обертывание сторонних библиотек в виде модулей...........148
5.4.1	 Инструменты пользовательского интерфейса  
	
для обертывания модуля с помощью Node.js........................148

Содержание
5.4.2	 Не идеально, но работает....................................................149
5.4.3	 Использование обернутого модуля для воспроизведения  
	
нот........................................................................................149
5.4.4	 Больше никакого автовоспроизведения аудио......................151
5.4.5	 Игра на веб-арфе..................................................................153
Резюме......................................................................................................153
ЧАСТЬ II	 СПОСОБЫ УЛУЧШИТЬ РАБОЧИЙ  
	
ПРОЦЕСС ВАШЕГО КОМПОНЕНТА................. 154
6	
Управление разметкой................................................................155
6.1	
Строки. Теория..............................................................................156
6.1.1	 Когда innerHTML становится уродливым............................156
6.2	
Использование шаблонных литералов...................................157
6.2.1	 Приложение для создания визиток.......................................158
6.3	
Импорт шаблонов........................................................................161
6.3.1	 Хранение разметки вне логики основного компонента......162
6.3.2	 Модуль для HTML и CSS........................................................162
6.4	
Логика шаблона............................................................................165
6.4.1	 Создание меню из данных.....................................................166
6.4.2	 Больше логики генерации и более жесткая  
	
автоматизация....................................................................167
6.5	
Кеширование элементов............................................................168
6.5.1	 Не заставляйте меня использовать метод  
	
querySelector в моем компоненте.........................................169
6.6	
Умные шаблоны...........................................................................171
6.6.1	 Использование lit-html..........................................................172
6.6.2	 Модуль repeat........................................................................172
6.6.3	 Нужно ли вам использовать это?........................................174
6.6.4	 Внедрение слушателей событий в разметку.......................175
6.7	
Обновление ползунка.................................................................177
Резюме......................................................................................................181
7	
Шаблонирование контента с помощью HTML............182
7.1	
Покойся с миром, HTML-импорт.............................................183
7.1.1	
Полифилинг...........................................................................184
7.1.2	
Что внутри...........................................................................185
7.2	
Тег <template>...............................................................................187
7.2.1	
Фрагменты документа........................................................188
7.2.2	
Использование содержимого шаблона..................................190
7.3	
Выберите свой вариант шаблона.............................................193
7.4	
Динамически загружаемые шаблоны.....................................196
7.5	
Вход в теневую модель DOM с помощью тега <slot>...........200