Автор этой статьи затронул по-моему мнению очень важную тему, но может как-то не очень подробно её раскрыл, написание комментария с ответом вылилось в этот пост.

Речь пойдет именно о тегах с кастомными именами, не о веб-компонентах.

Давайте посмотрим на то как мы сейчас пишем 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