Действительность имен тегов пользовательских элементов

Мы можем быть заняты, но в то же время можем уделить внимание мненинию Дэвида Биссета, которое заканчивалось на </$0.02>.

Это выглядит довольно мило. Даже в голову не приходят мысли о том, что идиома выражалась таким образом.

Это правильный HTML. Но если его превратить в веб-компонент, то как бы он мог выглядеть. 

Вы можете сделать, <my-two-cents>, но как насчет более краткого <my-$0.02>. Или же <my-2¢>?

Является ли <my-$0.02> допустимым имя тега для веб-компонента?

Сначала мы должны задаться вопросом: Какие символы разрешены в именах тегов для пользовательских элементов?

Вот ответ ChatGPT:

В HTML5 имена тегов пользовательских элементов могут содержать буквы (включая AZ и az), цифры (0-9), дефисы (-) и точки (.). Имя тега должно начинаться с буквы и не может содержать пробелов.

Но отвечает ли данный ответ действительности?

Пользуясь поисковиком, мы многого не нашли. Было несколько разрозненных сообщений в блогах и ответы StackOverflow со стандартными правилами именования веб-компонентов, которые мы знали, например, «имена тегов пользовательских элементов должны содержать дефис».

Это отсутствие ясности неизбежно привело нас к спецификации действительных имен пользовательских элементов, в которой говорится, что имена тегов должны соответствовать этому шаблону:

[a-z] (PCENChar)* '-' (PCENChar)*

Что такое PCENChar?

Это расширенная форма Бэкуса-Наура (EBNF) из спецификации XML.

Но я вижу, PCENChar что точки и цифры разрешены (как сказал мне ИИ), так что это <my-0.02> будет правильно. А как быть со знаком доллара?

Мы могли бы попытаться найти, какие символы попадают в диапазон этих #xN кодовых точек. Или мы могли бы просто остановиться здесь, открыть Codepen и начать пробовать разные имена тегов.

Если есть сомнения, откройте Codepen. Вот невероятно сложный пример, подробно описывающий допустимость имен тегов пользовательских элементов HTML. Это указывает на то, что символы доллара и цента запрещены.

Как насчет смайликов?

В своем исследовании мы можем наткнуться на проблему WHATWG с этим комментарием для имен тегов:

Пример довольно забавен тем, что он показывает, что вы можете написать что-то вроде, <mytag™> и оно будет отображаться как тег в DOM.

Это заставляет задуматься: можете ли вы поместить товарный знак или символ авторского права на пользовательский элемент? Мы не знаем, что попадает в диапазон этих #xN кодовых точек, но в спецификации сказано следующее:

Итак, смайлики разрешены в пользовательских элементах?!?

Может быть, в теории, но на практике (на момент написания этой статьи) эти пользовательские имена элементов не работают в Codepen.

Интересно, когда-нибудь мы увидим, как кто-то попытается юридически зарегистрировать торговую марку имени пользовательского тега элемента для какого-то соглашения, которое они якобы изобрели, — скажите что-нибудь вроде — а затем подаст в суд, <command-palette™> если кто-то попытается использовать то же имя для сети. компонент лол.

Заключение

Мы кратко попытались найти тестовые примеры для именования имен тегов пользовательских элементов в исходном коде webkit, но ничего не смогли найти. Они, наверное, существуют? И отказались от попыток.

Мы действительно надеялись, <my-$0.02> что это будет действительный веб-компонент. Это почти похоже на тег, который должен оборачивать каждый комментарий в Интернете, а затем оформляться так, чтобы указывать: «Читатель, будьте осторожны: это всего лишь мнение одного человека».