Тема первого дня — кастомные элементы. Как в узком смысле (часть стандарта HTML), так и в широком (framework-agnostic подход к написанию компонентов и приложений на их основе).
Опрос: знакомы ли вы с кастомными элементами?
🤔
21.6% Впервые слышу🤔
55.5% Знаю в общих чертах🤔
11.8% Есть некоторый опыт🤔
11.0% Использую в работеЕсли слышите впервые, советую эту главу в учебнике Ильи Кантора. Она небольшая, но хорошо описывает API и некоторые тонкости.
learn.javascript.ru/custom-elements
Поддержка браузерами — кроме IE11 и старого Edge. Многих наверняка смутит “partial support” в Safari, сейчас объясню.
caniuse.com/custom-element…
Дело в том, что разработчики WebKit принципиально отказались внедрять модифицированные встроенные элементы (customized builtin elements). С их позицией можно ознакомиться здесь.
github.com/WICG/webcompon…
Использовать браузерные API, относительно которых не достигнут консенсус, я не советую. Так что дальше речь пойдет об автономных кастомных элементах, реализованных в Chrome, Safari и Firefox.
Автономные кастомные элементы сами по себе умеют немногое. По сути это те же span, у которых есть жизненный цикл и которым не нужен Mutation Observer, чтобы отслеживать изменения атрибутов.
Пока главный плюс — сама способность определять свои HTML-теги и назначать им поведение с помощью JS. Это только первый шаг и он затянулся на годы, но заложил основу для следующих.
В перспективе браузеры предоставят разработчикам контроль над рядом аспектов, доступных нативным элементам: поддержка форм, обработка фокуса, псевдоклассы состояний.
Часть этих улучшений и базовое для них API Element internals уже добавлены в стандарт WHATWG. Но в стабильных версиях браузеров этих дополнений пока нет (кое-что есть только в Chrome).
Кстати, вы любите читать спецификации? Я обычно первым делом ищу в них разделы, отмеченные как “non-normative”. Там можно почерпнуть ценную информацию, не углубляясь в детали.
В не нормативных разделах спецификации кастомных элементов можно найти ответы на вопросы “зачем”, “как” и “чего пока не хватает”. Отдельно советую пример элемента taco-button.
html.spec.whatwg.org/multipage/cust…
Самый простой способ потестить кастомные элементы — сайт webcomponents.dev. Есть примеры разных библиотек и vanilla JS.