Блог

Главная - Вопросы по программированию - Разрешены ли пользовательские элементы HTML5 в

Разрешены ли пользовательские элементы HTML5 в

#html #custom-element

#HTML #пользовательский элемент

Вопрос:

Я пытаюсь написать некоторый код, совместимый со стандартами HTML5, где определенные скрипты необходимо запускать только после того, как пользователь дал согласие на использование файлов cookie.

HTML-код выглядит следующим образом, где элемент consent-script работает точно так же, как элемент script, однако не загружает скрипт до тех пор, пока не будет дано согласие.

 <head>

<consent-script src="myscript.js"></consent-script>

</head>

Все работает нормально во всех браузерах,
однако, когда я пытаюсь проверить это с помощью https://validator.w3.org / , тег пользовательского элемента, по-видимому, закрывает раздел head и генерирует кучу ошибок.

Глядя на спецификации, я не вижу причин, по которым пользовательские элементы нельзя использовать в разделе. Но я не уверен.

Мой вопрос в том, можно ли использовать пользовательские элементы HTML5 в HEAD? Если я могу, то это ошибка в службе проверки. Если нет, то мне придется найти другой способ не запускать скрипт до нужного момента.

Спасибо.

Редактировать. Дальнейшее расследование (спасибо @Danny’365CSI’Engelman) наводит меня на мысль, что даже браузер перемещает пользовательский элемент из раздела head в раздел body .

Некоторый макет кода:

Источник:

 <!DOCTYPE html>
<html>
<head>
  <my-custom-elem></my-custom-elem>
  <!-- other tags in the HEAD -->
</head>
<body>this is the body
</body>
</html>

Тем не менее, инструменты разработчика Chrome дают мне:

 <html>
<head>
</head>
<body>
  <my-custom-elem></my-custom-elem>
  <!-- other tags in the HEAD -->

  this is the body

</body></html>

Комментарии:

1. И если вы установите флажок F12 , где находится ваш пользовательский элемент? ГОЛОВА или ТЕЛО?

2. Элемент находится в Head, если смотреть на него в браузере… Редактировать: Извините, нет, это не так. Его в <body>

3. Мне интересно узнать, какие console.log(document.querySelector("consent-script").parentNode) результаты.. поскольку в вашем сообщении вы говорите, что элемент закрывает раздел HEAD , к вашему сведению, я часто использую пользовательские элементы в HEAD .

4. У меня пока не возникало никаких проблем (кроме жалобы валидатора) Я использую CE для генерации всех скриптов и мета-тегов в ЗАГОЛОВКЕ См. Страницу: hexedland.com/ludo.html , если вы посмотрите на страницу-источник, все после того, как CE перемещается в тело — браузером -, потому что, как вы сказали, CE закрывает ЗАГОЛОВОК .. Поскольку это так templates , style и script теги, которые яна самом деле все равно, находятся ли они в HEAD или BODY .. (но теперь они являются дочерними элементами BODY! и занимают место в CSS-сетках, например, ЕСЛИ сетка находится в ТЕЛЕ)

5. Да, это то, что я делаю со своим <hexed-head> элементом. он объявлен с загрузкой блокировки рендеринга как можно скорее; затем создается весь ЗАГОЛОВОК … и.. удаляет себя. Таким образом, он виден в исходном коде страницы, но больше не на панели элементов F12. За последние месяцы я не слышал никаких проблем; жалуется только валидатор. Это потому, что все браузеры закрывают раздел HEAD (как вы заметили) и сбрасывают все после в ТЕЛЕ. Но я не могу ответить на ваш вопрос, если все это действительно . Поскольку это работает для меня, я еще не задал вопрос в источнике: github.com/WICG/webcomponents/issues