Содержание
Предисловие .................................................................................................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 Использование тега