Автор этой статьи затронул по-моему мнению очень важную тему, но может как-то не очень подробно её раскрыл, написание комментария с ответом вылилось в этот пост.
Речь пойдет именно о тегах с кастомными именами, не о веб-компонентах.
Давайте посмотрим на то как мы сейчас пишем html
<div class=loader">wait</div>обратите внимание что в этом конкретно примере важно для разработчика, а что является бойлерплейтом? Мы видим что есть loader с контентом wait и этот элемент блочный(но это неточно надо глянуть в css стили еще), а вот <div class=""></div> это типовой/boilerplate код.
В препроцессоре html pug(jade) созданном чтобы упростить набор html-кода то же самое было бы записано просто вот так:
.loader waitкому-то он кажется уже чем-то черезчур, типа сложно такую мешанину где из разделителей только пробелы читать, местами я с ними согласен.
Но посмотрите как легко и нативно мы можем избавится от большей части шаблонного кода
<loader>wait</loader>Используя свои имена тегов мы тем самым пишем и читаем меньше бойлерплейта.
Было шаблонного кода: <div class=""></div>
Стало шаблонного кода: <></>
Была смысловая конструкция из 3х частей: <тег атрибут="значение">
Стала смысловая конструкция из одной: <тег>
Есть и другие плюсы. Вот вы слегка прокрутили код в своей ide и видите в конце блока следующее
. . .
</span></p>
</div>
</div>
</div>что это у нас закрывается? Да, вверху страницы у этих тегов есть классы и id и может какие-то другие опознавательные признаки, но что касается закрытия, в каком-то коде можно встретить комментарии с классом закрывающегося тега где-то нет, а можно писать так
. . .
</upper-case></p>
</call-to-action>
</slide-item>
</swipe-slider>Обратите внимание что я советую сократить написание бойлерплейт кода, а не тупо заменять стандартные теги на свои. То есть заголовок лучше написать так
<h1 class="rainbow">My title</h1>а не так
<rainbow role="heading" aria-level="1">My title</rainbow>потому что в данном случае, использование кастомного тега увеличивает количество шаблонного-кода, а не уменьшает.
Помимо этого так же стоит отдавать предпочтение тегам main footer article section aside когда они подходят по смыслу вместо div .
Написание css стилей с использованием селекторов по именам тегов так же становится проще. Хотелось бы еще сказать про то в каких случаях использовать классы, в каких атрибуты , а когда dataset (атрибуты с data-) и что хватит пихать все в одни только css-классы что show это не класс тега а состояние, но это пожалуй потянет на отдельную статью.
В соответствии со спецификацией html имена своих тегов обязательно должны содержать разделитель "черточка" - но я лично не нашел доводов против использования имен без черточек, <mytag> - работает на всех устройствах до которых удалось дотянуться, ровно так же как и <my-tag> , там нет какого-то лага / дополнительного парсинга или чего-то еще, разве что из него нельзя позже сделать веб-компонент, без переименовывания.
Что касается SEO - то поисковикам совершенно без разницы<div class="bar">(а скорее после компиляции реактом это будет какой-нибудь <div class="sc-dd348ae-0">) или <bar> и если бы дело было только в SEO то хотя бы закрытые авторизацией SPA писали бы уже с использованием кастомных имён.
Я же вижу что многие просто пишут по старинке, новички и не знают что так можно потому что не видели примеров, мидлы всё еще боятся - а вдруг где-то(на умном холодильнике) это да не сработает, а сеньёрам вообще не до того )
Давайте будем писать более лаконичный и выразительный код, ну или как минимум не сопротивляться таким вот "нововведениям" в вашей кодовой базе. Это ведь даже не какое-то ноу-хау, не очередной модный фреймворк о котором потом все забудут - это обычный html который так работает уже больше 10 лет, на котором вы и так пишете но делаете это... ну как в примерах выше :-)
Полезные ссылки по теме
https://web.dev/articles/customelements?hl=ru
https://html.spec.whatwg.org/multipage/custom-elements.html
https://custom-elements-everywhere.com/
https://matthewjamestaylor.com/custom-tags
