Étiquette HTML (personnalisée) Étiquette

Question

Je comprends que l'utilisation de balises html personnalisées est inappropriée pour diverses raisons, mais je voulais exécuter une situation spécifique par vous-même qui pourrait justifier une balise html personnalisée et j'espère qu'on me répondra autrement ou peut-être mieux manière d'atteindre mon but.

Tout au long de mon code, j'ai ce que j'appelle des modèles qui sont constitués d'une balise div avec un modèle et une classe cachée attachée à elle. Ce n'est pas visible sur l'écran, mais fondamentalement ces balises "template" contiennent html que j'utilise en Javascript pour créer une variété d'éléments différents. Je fais cela pour que je puisse styler mes modèles en HTML plutôt que d'avoir à me soucier du mélange de CSS avec mon Javascript.

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

En javascript je ferais quelque chose comme

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

Je préférerais être en mesure de faire quelque chose comme ça

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

Alors que si je dispose de plusieurs modèles dans un seul div I peut les attraper tous plutôt que d'avoir à leur donner des noms de classe uniques. Bien sûr, mon raisonnement pour avoir besoin d'une mise en œuvre va beaucoup plus loin que cela, mais il n'est pas nécessaire de perdre votre temps avec les détails. Disons simplement que cela aidera à nettoyer mon Javascript ALOT. Parce que la balise de modèle personnalisé est cachée et n'est vraiment rien de plus qu'un conteneur qui est pratique à appeler dans javascript avec document.getElementsByTagName ("template"); Est-ce correct de faire? Je préfèrerais probablement le tag avec un nom personnalisé au cas où le template serait implémenté en html.

Answer 1

Pourquoi ne pas utiliser l'un des HTML5 data attributes? Ils servent à stocker des données privées ou des informations personnalisées.

Pour votre cas, vous pouvez ajouter data-type="template" ou data-name="template", puis rechercher et supprimer en fonction de cela. Une simple fonction comme vous écrirait pour supprimer votre tag <template>, mais sans enfreindre les règles.

Ainsi, en utilisant votre exemple, <div data-type="template" class="hidden"></div>

Answer 2

Les navigateurs modernes généralement « support » balises personnalisées dans le sens de leur analyse et la construction des noeuds DOM, de sorte que les éléments peuvent être coiffés et traités dans les scripts.

Le principal problème est IE avant IE 9, mais il peut être géré en utilisant document.createElement('...') une fois pour chaque nom de tag personnalisé.

Un autre problème est que les validateurs signaleront les étiquettes comme des erreurs, et s'il y a des charges de telles erreurs, vous pourriez ne pas remarquer de vraies erreurs dans le balisage. En principe, vous pouvez créer votre propre DTD pour y faire face (j'ai un générateur de DTD HTML en construction, mais c'est plus compliqué que prévu ...). Avec ces réserves, utilisez des balises personnalisées si elles simplifient essentiellement votre travail par rapport à l'utilisation des classes.