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

Бен Фаррелл

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

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

Содержание

2.2 
Правила именования вашего элемента ...................................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