HTML-шаблон (пользовательский) тег

Я понимаю, что использование пользовательских тегов html нецелесообразно по ряду причин, но я хотел, чтобы вы выполнили конкретную ситуацию, в которой может потребоваться собственный тег html, и, надеюсь, вам сообщат иначе или, возможно, лучший способ достижения моей цели.

В моем коде у меня есть то, что я называю шаблонами, которые состоят из тега div с шаблоном и прикрепленным к нему скрытым классом. Это не видно на экране, но в основном эти "шаблонные" теги содержат HTML, который я использую в Javascript для создания различных элементов. Я делаю это так, чтобы я мог стилизовать свои шаблоны в html, а не беспокоиться о смешивании CSS с моим Javascript.

<!-- TEMPLATE -->
<div class="template hidden">
    <span>Random Container</span>
    <a href="#">Random Button</a>
</div>

В JavaScript я бы сделал что-то вроде

var template = document.getElementById("template");
var clone = template.cloneNode(true);
clone.removeClass("template hidden");

Я бы предпочел сделать что-то подобное

<template class="hidden">
   <span>Random Container</span>
   <a href="#">Random Button</a> 
</template>

Так что, если у меня есть несколько шаблонов в одном div, я могу получить их все вместо того, чтобы давать им уникальные имена классов. Конечно, мои соображения о необходимости реализации намного глубже, чем это, но нет необходимости тратить свое время на детали. Скажем так, это поможет очистить мой Javascript ALOT.

Поскольку пользовательский тег шаблона скрыт и на самом деле является не чем иным, как контейнером, который удобно вызывать в javascript с document.getElementsByTagName("template"); Это нормально делать? Я бы, вероятно, добавил к тегу собственное имя, если шаблон когда-нибудь будет реализован в html.

Источник

2 ответа

Решение

Почему бы не использовать один из атрибутов данных HTML5? Они предназначены для хранения личных данных или пользовательской информации.

Для вашего случая вы можете добавить data-type="template" или же data-name="template" а затем искать и удалять на основе этого. Одна простая функция, как вы написали бы, чтобы удалить <template> тег, но без нарушения правил.

Итак, используя ваш пример, <div data-type="template" class="hidden"></div>

Источник

Современные браузеры обычно "поддерживают" пользовательские теги в смысле их синтаксического анализа и конструирования DOM-узлов, так что элементы можно стилизовать и обрабатывать в сценариях.

Основной проблемой является IE до IE 9, но его можно решить с помощью document.createElement('...') один раз для каждого имени пользовательского тега.

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

С этими оговорками используйте пользовательские теги, если они существенно упрощают вашу работу по сравнению с использованием классов.

Источник
Другие вопросы по тегам