Как заменить HTML-теги на кастомные?

Question

[prrrrrrr]

Подскажите, как заменить HTML-теги на кастомные?

например:

<section>Hello world</section>
на
<app>Hello world</app>

и

<section class="top">Hello world</section>
на
<app position="top">Hello world</app>

т.е. в стилях буду работать по стандарту, пример:

section {background:red}
.top {position:absolute;top:0;}

Comments

[Kovalsky]

Суть проблемы именно в преодолении религиозных убеждений связанных с использованием стандартных тегов или в чем-то другом?

В CSS к этим элементам вы будете обращаться абсолютно так же, как и в случае со стандартными элементами: по имени тега - без точки, по классу - с точкой, по атрибутам - с использованием квадратных скобок, то есть, рассматривая ваш случай, к элементу с тегом app обращаться селектором app, а к элементу с атрибутом position равным top обращаться селектором [position='top']

Answer 1

[Максим]

Если валидатор не интересует то вполне можно использовать любой кастомный тег : https://codepen.io/topicstarter/pen/oNvqGjG

Answer 2

[Дмитрий Арушанов]

https://learn.javascript.ru/webcomponent-core
https://code.tutsplus.com/ru/tutorials/extending-t...
??