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

Бен Фаррелл

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

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

Содержание

7.5.1 
Тег <slot> без имени ..............................................................203

Резюме .....................................................................................................205

8 

Теневая модель DOM ....................................................................206
8.1 
Инкапсуляция ..............................................................................207
8.1.1 Защита API вашего компонента .........................................208
8.1.2 Защита DOM вашего компонента ......................................209

8.2 
Использование теневой модели DOM ....................................211
8.2.1 Корень теневого дерева ........................................................213
8.2.2 Закрытый режим .................................................................215
8.2.3 Конструктор вашего компонента и метод  
 
connectedCallback: сравнение ...............................................218

Резюме .....................................................................................................221

9 

Shadow CSS .........................................................................................222
9.1 
Утечка стилей ...............................................................................222
9.1.1 Утечка стилей в нижестоящие компоненты .....................224
9.1.2 Утечка стилей в ваш компонент ........................................225

9.2 
Проблема утечки стилей решается с помощью  
 
теневой модели DOM .................................................................228
9.2.1 Когда происходит утечка стилей ........................................231

9.3 
План тренировок .........................................................................233
9.3.1 Оболочка приложения ..........................................................234
9.3.2 Селекторы host и ID .............................................................236
9.3.3 Сетка упражнений и список планов ....................................238

9.4 
Адаптируемые компоненты .....................................................242
9.4.1 Создание компонента упражнения .....................................243
9.4.2 Стили компонента упражнений .........................................245

9.5 
Обновляем ползунок ..................................................................248

Резюме .....................................................................................................250

10 

Проблемы Shadow CSS .................................................................251
10.1 Контекстные селекторы .............................................................251
10.1.1 Немного интерактивности.................................................252
10.1.2 Контекстные стили ............................................................256
10.1.3 Обходной путь ......................................................................260

10.2 Темы компонента ........................................................................262
10.2.1 Селекторы ::shadow и /deep/ ................................................263
10.2.2 CSS-переменные ...................................................................265
10.2.3 Применяем CSS-переменные в нашем примере ...................267

10.3 Использование теневой модели DOM на практике  
 
(сегодня) ........................................................................................269
10.3.1 Поддержка со стороны браузеров ........................................269
10.3.2 Полизаполнение ....................................................................270

Содержание

10.3.3 Дизайн-системы ..................................................................271

Резюме .....................................................................................................273

ЧАСТЬ III ОБЪЕДИНЯЕМ КОМПОНЕНТЫ  
 
ВОЕДИНО .......................................................................... 274
11 

Реальный компонент пользовательского  
 
интерфейса ........................................................................................275

11.1 Создаем палитру цветов ............................................................276
11.1.1 Компоненты нашего компонента .......................................278

11.2 Компонент выбора координат .................................................280
11.2.1 Класс инструмента выбора координат ..............................280
11.2.2 HTML-код и стили инструмента для выбора  
 
координат ............................................................................284
11.2.3 Демостраницы для компонентов ........................................285

11.3 Палитра цветов ............................................................................287
11.3.1 Наблюдение за изменениями атрибутов  
 
для взаимодействия .............................................................292
11.3.2 Реакция на изменения в полях ввода ....................................294
11.3.3 Реакция на изменения атрибутов .......................................296

11.4 Работаем над внешним видом палитры ................................298
11.4.1 Загрузка CSS-переменных для улучшения дизайна ..............299
11.4.2 Использование импорта для более сложных стилей ...........302

Резюме .....................................................................................................307

12 

Сборка и поддержка старых браузеров ............................309

12.1 Обратная совместимость ...........................................................310
12.1.1 Включение теневой модели DOM .........................................311
12.1.2 Сравнение с полифилами .....................................................315
12.1.3 Shadow CSS и дочерние элементы ........................................316

12.2 Наименьший общий знаменатель...........................................319
12.3 Процессы сборки .........................................................................321
12.3.1 Использование сценариев NPM ............................................322

12.4 Сборка компонентов ..................................................................323
12.4.1 Почему мы выполняем сборку ..............................................324
12.4.2 Компоновка модулей с помощью Rollup ...............................326
12.4.3 Запуск сборки с помощью npm .............................................330

12.5 Транспиляция для IE ..................................................................332
12.5.1 Babel .....................................................................................333
12.5.2 CSS-vars-ponyfill ...................................................................337

Резюме .....................................................................................................339

Содержание
13  

Тестирование компонентов ....................................................341
13.1 Модульное тестирование и разработка через  
 
тестирование ................................................................................342

13.2 Web Component Tester ................................................................343
13.2.1 Пишем тесты ......................................................................347

13.3 Сравнение со стандартной тестовой конфигурацией  
 
при использовании Karma ........................................................352
13.3.1 Плагин karma-web-components ............................................359
13.3.2 Несколько тестов в одном проекте ....................................361
13.3.3 Замечание относительно Safari ..........................................362

Резюме .....................................................................................................362

14  

События и поток данных приложения ............................363
14.1 Использование фреймворков ...................................................364
14.2 События .........................................................................................365
14.2.1 Нативные события и WebComponentsReady .......................365
14.2.2 Когда определяются пользовательские элементы .............367
14.2.3 Пользовательские события .................................................368
14.2.4 Всплытие пользовательского события ...............................370

14.3 Передача событий через веб-ком по нен ты ...........................372
14.3.1 Распространение нативных событий с помощью  
 
теневой модели DOM ...........................................................373
14.3.2 Распространение пользовательских событий  
 
с помощью теневой модели DOM.........................................374

14.4 Разделение данных .....................................................................376
14.4.1 Модель–представление–контроллер ..................................377
14.4.2 Локальное хранилище ...........................................................380
14.4.3 Подключение пользовательского интерфейса  
 
к модели данных ...................................................................383

14.5 Воспроизведение упражнений ................................................386
14.6 Передача событий с помощью шины .....................................390
14.6.1 Статические методы чтения и типы событий .................393
14.6.2 Шаблоны проектирования как рекомендация .....................394

Резюме .....................................................................................................395

15 

Сокрытие сложностей ...............................................................396
15.1 Взгляд в будущее веб-компонентов ........................................397
15.2 3D и смешанная реальность .....................................................399
15.2.1 A-Frame ................................................................................402
15.2.2 Компонент model-viewer ......................................................406
15.2.3 model-viewer и поиск с помощью Poly ...................................408
15.2.4 Дополненная реальность и model-viewer .............................410
15.2.5 Ваш собственный 3D-компонент ........................................413

15.3 Видеоэффекты .............................................................................422

Содержание

15.3.1 Обработка пикселей с помощью JavaScript..........................423
15.3.2 Шейдеры WebGL ...................................................................426

15.4 Отслеживание движений рук и машинное обучение .........429
Резюме .....................................................................................................435

Приложение 
ES2015 для веб-компонентов ..........................................................436

Указатель .................................................................................................................460

Предисловие

Интернет прошел долгий путь. То, что началось три десятилетия назад 
как относительно простое средство публикации, совместного использования, обнаружения и потребления контента, превратилось в мощную 
и гибкую платформу приложений, поддерживающую невероятное количество вариантов использования. Между тем сфера его присутствия 
расширилась, и теперь выход в интернет осуществляется не только с настольных компьютеров, но и с устройств всех типов.
В результате этого постепенного преобразования мы, веб-разра ботчи ки, преследуем постоянно меняющуюся цель. Сегодняшние веб-сайты 
на несколько порядков сложнее по сравнению с их ранними предшественниками, и ожидания, связанные с пользовательским интерфейсом, 
значительно выросли.
К счастью, наш инструментарий также не стоял на месте. Сама вебплатформа приобрела сотни новых возможностей, а последующие поколения библиотек, фреймворков и инструментов постоянно совершенствуют современный уровень развития технологий, помогая нам 
удовлетворять растущие требования.
Одним из основных факторов, способствующих трансформации интернета в последние годы, стало широкое внедрение разработки пользовательского интерфейса на основе компонентов. Разделение нашей 
работы на компоненты, каждый из которых отвечает за структуру, стиль 
и поведение части пользовательского интерфейса, помогло нам управлять сложностью и создавать более сложные сайты.
Компоненты можно повторно использовать в каком-либо проекте 
или совместно в разных проектах, что повышает нашу эффективность. 
Дизайн-системы можно выразить в виде наборов готовых к использованию компонентов, обеспечивающих согласованность, которые позволяют командам сосредоточиться на конкретных потребностях продукта.
Популярные фреймворки помогли осуществить революцию компонентов, и сегодня большинство компонентов специфичны для конкретного фреймворка или библиотеки. Но параллельно предпринимались 
многолетние усилия по созданию мощной, нативной модели компонентов для веб-платформы.
Веб-компоненты – это общий термин для нового семейства функций 
веб-платформ, предлагающих прямую поддержку разработки на основе компонентов. Пользовательские элементы позволяют расширять 
словарь HTML, определяя собственные теги, которые легко работают со 
встроенными в браузер тегами и могут использоваться в одних и тех же 
местах, независимо от фреймворка. Технология Shadow DOM позволяет 
вам применять инкапсуляцию в нативном стиле, гарантируя, что CSSпра вила компонента не будут непреднамеренно нарушать – и не будут 
нарушаться – форматирование страницы.

Предисловие

Вам, наверное, интересно, какие преимущества дают веб-ком по нен ты 
по сравнению с компонентными моделями. С одной стороны, веб-компо нен ты обещают повысить совместимость, упрощая обмен компонентами даже между комплектами технологий. Модель общих компонентов 
также снижает риск блокировки, позволяя вам выполнять больше работы по мере изменения набора инструментов с течением времени.
Книга, которую вы сейчас держите в руках, исключительно своевременна. Путь к стандартизации и поддержка веб-ком по нен тов претерпевали взлеты и падения, но я рад сообщить, что цель уже видна: все, кроме 
одного из популярных браузеров, уже поддерживают веб-ком по нен ты, 
а когда состоится официальный релиз следующей версии Microsoft Edge, 
головоломка будет завершена.
Пользовательские элементы, Shadow DOM и другие функции веб-компо нен тов по своей природе являются низкоуровневыми примитивами. 
Некоторые разработчики будут использовать эти функции только косвенно, поскольку поддержка веб-ком по нен тов во фреймворках увеличилась с ростом поддержки браузеров. Многие из самых популярных 
фреймворков теперь облегчают разработку и совместное использование 
веб-ком по нен тов, и стал появляться целый новый класс инструментов, 
ориентированных на веб-ком по нен ты.
Но вы также можете использовать функции веб-ком по нен тов напрямую, по отдельности или сочетая их. Читая эту книгу, вы подробно 
изучи те каждую функцию и то, как они связаны друг с другом, что даст 
вам возможность сделать правильный выбор для себя и своей команды.
Бен Фаррелл использовал веб-ком по нен ты с момента их возникновения в самых разных приложениях. В ходе своей работы он накопил 
огромное количество ценных знаний и обнаружил множество эффективных шаблонов, которыми он поделится с вами на этих страницах.
Бен приводит примеры, демонстрируя разные концепции с помощью 
убедительных проектов, которые освещают реалистичные варианты использования. Вы, конечно, многому научитесь, но также непременно 
найдете здесь идеи и код, которые можно применить непосредственно 
в своих собственных проектах.
Решив заняться веб-ком по нен та ми и взяв эту книгу, вы сделали хороший выбор. Наслаждайтесь этим путешествием!
Грей Нортон,
технический руководитель /  
менеджер проекта Polymer, GOOGLE

От автора

Для меня знакомство с веб-ком по нен та ми началось в 2013 году. Я помню, что работал над забавным небольшим проектом с использованием 
Angular версии 1 и изучал некоторые аспекты управления CSS и классами, которые Angular в то время плохо обрабатывал. Я знал, что мог бы 
легко сделать то, что мне нужно, в простом HTML, CSS и JavaScript, но 
Angular затруднял это только потому, что то, что я делал, находилось за 
пределами проторенных троп.
Примерно в это же время я почувствовал, что действительно начинаю 
овладевать Angular, поэтому написал в блоге несколько постов о некоторых интересных, нетипичных подходах. Тогда же волнение по поводу 
Angular стало угасать, и только начиналось волнение по поводу React.
Честно говоря, я был разочарован. Я долго смотрел на цикл, в котором 
чувствовал себя пойманным в ловушку. В течение всего двух или трех 
лет я постоянно учился и получал хорошие знания по фреймворкам JS. 
Ни один из этих фреймворков не был совместим друг с другом. Я дошел 
до того, что почувствовал, что действительно могу сосредоточиться на 
своем проекте без фреймворка на заднем плане, но затем неожиданно 
появилось нечто новое, что заставило меня почувствовать, что мне нужно вернуться на круги своя.
В то же самое время Google была выпущена библиотека Polymer как 
очень ранняя и нестабильная версия. Создание отдельных компонентов, 
которые могли бы существовать где угодно, звучало как удивительное 
обещание. Первоначально мне нравилось то, чего она пыталась достичь, 
но API, предшествующий первой версии, который постоянно менялся, 
и тот факт, что я заменял свой рабочий процесс еще одним фреймворком, заставил меня все переосмыслить. Я начал изучать предлагаемые 
веб-стандарты, которые сделали возможным создание библиотеки Polymer, и увидел огромный потенциал. Я понял, что это была не библиотека 
Polymer, которой я восхищался, – в действительности это были веб-компо нен ты.
Я начал вести блог и дискуссии о веб-компонентах. Примерно в это же 
время присоединился к Adobe. Это было важно, потому что моя команда работала над небольшими прототипами с одним, может быть, двумя 
разработчиками проекта. Это означало, что я мог экспериментировать 
с технологией и инструментами по своему выбору. Почти для каждого 
проекта я продолжал продвигать веб-ком по нен ты, экспериментируя 
и постоянно улучшая рабочий процесс для работы с ними.
Конечно, это было непросто. Иногда я полностью был лишен почвы 
под ногами! Поскольку веб-ком по нен ты стали стандартом, которым 
они являются сегодня, мы увидели, что изменение API и функции стали устаревшими, но у меня не было выбора, потому что мне действительно нравится работать как можно ближе к браузеру, используя только 

От автора

HTML, JS и CSS, и я рассматривал веб-ком по нен ты как средство обеспечения структуры своих проектов, а не для того, чтобы они превратились 
в спагетти-код.
Я еще не был полностью убежден в жизнеспособности веб-ком по нентов. С одной стороны, я пока не использовал Shadow DOM. Я не хотел 
увлекаться чем-то, что поддерживала только Google, у которой была сомнительная поддержка полифилов. Но затем веб-ком по нен ты появились 
в браузере Safari, и Mozilla также пообещал, что будет поддерживать их. 
Вишенкой на торте стал момент, когда браузеры начали поддерживать 
модули JS и импорт нативно, и я смог правильно разделить код и, что 
более важно, HTML и CSS. Когда все это произошло, я знал, что веб-компо нен ты начинают реализовывать свой потенциал.
Конечно, все происходило очень медленно в течение нескольких лет. 
Многие разработчики, которые изначально были в восторге от вебком по нен тов, потеряли терпение, и я не виню их. Сначала я обратился 
к издательству Manning по поводу книги о веб-компонентах – до того, 
как произошли некоторые важные ключевые события, например когда 
крупные компании-разработчики популярных браузеров объединились, 
чтобы завершить версию спецификации номер 1. В то время Manning не 
было уверено, особенно из-за того, что книги в этой области не публиковались, поскольку было неизвестно, чем все это закончится.
Был ли я настроен слишком оптимистично или просто провел с ними 
достаточно времени, чтобы узнать потенциал веб-ком по нен тов, но издательство связалось со мной через год, чтобы сделать еще одно предложение. Даже тогда, в начале 2018 года, дело все равно могло бы принять дурной оборот, если бы другие компании-разработчики браузеров 
решили пойти на попятную. Кроме того, в то время я не подходил к разработке веб-ком по нен тов так, как это делало большинство разработчиков, используя импорт HTML в качестве отправной точки. Тем не менее 
на протяжении этой книги класс LitElement от команды Polymer начал 
действовать в очень похожей со мной манере, используя шаблонные 
литералы для хранения разметки и стиля. Это, в сочетании с поддержкой веб-ком по нен тов, когда над ними работала и компания Microsoft, 
осенью 2018 года позволило мне вздохнуть с облегчением, зная, что 
подходы, описанные в моей книге, идут в ногу с настоящим и будущим 
веб-ком по нен тов. Я определенно продолжу совершенствовать свой рабочий процесс, по мере того как новые функции появляются в браузере 
и придумываются сообществом, но я очень рад нынешнему положению 
веб-ком по нен тов, поскольку моя книга скоро будет опубликована. И конечно же, мне не терпится поделиться всем этим с читателями!

Благодарности

Данная книга была бы невозможна без всех тех удивительных людей, которые помогали мне на протяжении этого пути. Я хочу поблагодарить 
своих друзей из Северной Каролины и замечательных людей, которые 
проводят и посещают конференцию NCDevCon, за то, что они почти постоянно слушали мои доклады о веб-компонентах в Yammer. В частности, я хотел бы поблагодарить Эдриана Помилио за то, что он поразил 
меня своим выступлением в 2011 году, в котором были показаны пользовательские элементы, прежде чем они стали чем-то особенным.
Я также хотел бы поблагодарить членов команды GE Design System за 
то, что они были моими «сообщниками» в этом деле, в то время когда 
веб-ком по нен ты были абсолютным новшеством, и мы были уверены, 
что все остальные считают нас безумцами. В частности, я хотел бы поблагодарить Мартина Рэгга, Джеффа Райхенберга и Джона Роджерсона 
за то, что они копались со мной в деталях при написании этой книги 
о новом способе создания сайтов. Еще хотел бы поблагодарить команду 
Google Polymer за помощь и руководство в течение этого времени, а также их технического руководителя Грея Нортона за написание предисловия к книге.
В Adobe я хотел бы поблагодарить всю команду Adobe Design (и за ее 
пределами) за поддержку и искреннюю радость по поводу публикации 
моей первой книги.
Конечно, моя жена Ребекка Гомес Фаррелл не только поддерживала 
меня, но и сама оказалась замечательным писателем и редактором. Помимо того что она принесла мне крепкий напиток, когда он мне понадобился, она помогла новому писателю стать лучше, давая стоящие, профессиональные советы.
Я хотел бы поблагодарить редакционную команду издательства Manning, в которую входят редакторы-консультанты по аудитории Кристен 
Уоттерсон, Кевин Харрелд и Ребекка Райнхарт, а также редактор-консультант по технической аудитории Дуглас Дункан, технический корректор Мэтью Уэлк, редактор по производству Энтони Калькара, редактор 
Ребекка Деуэль-Гальегос и корректор текста Тиффани Тейлор. Наконец, 
я хотел бы поблагодарить рецензентов, чьи отзывы и понимание сыграли важную роль в формировании этой книги, в том числе Альберто Чарланти, Алисию Бейкер, Бирну Себарте, Клайва Харбера, Дэниела Купера, Эрнана Гарсия, Джеймса Карелла, Джона Ларсена, Хуана Асенсио, 
Джастина Каллеха, Оливера Ковача, Пьетро Маффи, Рональда Бормана, 
Рассела Доуна Кахолес, Райана Барроуз, Серхио Арбео, Стефана Троста, 
Томаса Оверби Хансена, Тимоти Р. Кейна и Кумара С. Унникришнана (TR 
Technology & Ops).