Знакомство с кастомными элементами
Тред из первого дня моей недели в @jsunderhood.
Тема первого дня — кастомные элементы. Как в узком смысле (часть стандарта HTML), так и в широком (framework-agnostic подход к написанию компонентов и приложений на их основе).
— jsunderhood (@jsunderhood) November 9, 2020
Опрос: знакомы ли вы с кастомными элементами?
— jsunderhood (@jsunderhood) November 9, 2020
Если слышите впервые, советую эту главу в учебнике Ильи Кантора. Она небольшая, но хорошо описывает API и некоторые тонкости.https://t.co/B0GnhPFI7U
— jsunderhood (@jsunderhood) November 9, 2020
Поддержка браузерами — кроме IE11 и старого Edge. Многих наверняка смутит “partial support” в Safari, сейчас объясню.https://t.co/Fp1IID2Qju
— jsunderhood (@jsunderhood) November 9, 2020
Дело в том, что разработчики WebKit принципиально отказались внедрять модифицированные встроенные элементы (customized builtin elements). С их позицией можно ознакомиться здесь.https://t.co/Xwr6lJTKYg
— jsunderhood (@jsunderhood) November 9, 2020
Использовать браузерные API, относительно которых не достигнут консенсус, я не советую. Так что дальше речь пойдет об автономных кастомных элементах, реализованных в Chrome, Safari и Firefox.
— jsunderhood (@jsunderhood) November 9, 2020
Автономные кастомные элементы сами по себе умеют немногое. По сути это те же span, у которых есть жизненный цикл и которым не нужен Mutation Observer, чтобы отслеживать изменения атрибутов.
— jsunderhood (@jsunderhood) November 9, 2020
Пока главный плюс — сама способность определять свои HTML-теги и назначать им поведение с помощью JS. Это только первый шаг и он затянулся на годы, но заложил основу для следующих.
— jsunderhood (@jsunderhood) November 9, 2020
В перспективе браузеры предоставят разработчикам контроль над рядом аспектов, доступных нативным элементам: поддержка форм, обработка фокуса, псевдоклассы состояний.
— jsunderhood (@jsunderhood) November 9, 2020
Часть этих улучшений и базовое для них API Element internals уже добавлены в стандарт WHATWG. Но в стабильных версиях браузеров этих дополнений пока нет (кое-что есть только в Chrome).
— jsunderhood (@jsunderhood) November 9, 2020
Кстати, вы любите читать спецификации? Я обычно первым делом ищу в них разделы, отмеченные как “non-normative”. Там можно почерпнуть ценную информацию, не углубляясь в детали.
— jsunderhood (@jsunderhood) November 9, 2020
В не нормативных разделах спецификации кастомных элементов можно найти ответы на вопросы “зачем”, “как” и “чего пока не хватает”. Отдельно советую пример элемента taco-button.https://t.co/f9SVFATe6j
— jsunderhood (@jsunderhood) November 9, 2020
Самый простой способ потестить кастомные элементы — сайт https://t.co/zCIvxgDIGu. Есть примеры разных библиотек и vanilla JS.
— jsunderhood (@jsunderhood) November 9, 2020