HTMLテンプレート（カスタム）タグ

Question

カスタムhtmlタグを使用することはさまざまな理由で不適切だと理解していますが、カスタムhtmlタグを保証する特定の状況を実行したかったと思います。私の目標を達成する方法。

私のコード全体を通して、私はテンプレートとそれに付けられた隠れたクラスを持つdivタグで構成されたテンプレートという用語を持っています。これは画面には表示されませんが、基本的にこれらの「テンプレート」タグには、Javascriptでさまざまなアイテムを作成するために使用するHTMLが含まれています。私は私のテンプレートをHTMLでスタイルすることができるように、私のJavascriptとCSSを混在させることを心配しなくてもいいようにしています。

私はむしろ私は、単一のdiv Iで複数のテンプレートを使用している場合ように、この

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

ような何かを行うことができるだろう

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

ような何かをするだろうJavaScriptで

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

それらに独特のクラス名を与える必要はなく、それらをすべて掴むことができます。もちろん、実装を必要とする私の推論はこれよりもはるかに深刻ですが、詳細で時間を無駄にする必要はありません。私のJavascript ALOTをきれいにする助けになると言いましょう。

カスタムテンプレートタグは非表示であり、実際にはdocument.getElementsByTagName（ "template"）を使用してjavascript内で呼び出すのに便利なコンテナです。これは大丈夫ですか？テンプレートがhtmlに実装されている場合は、カスタム名を付けることにします。

Answer 1

HTML5のdata attributesのいずれかを使用してみませんか？プライベートデータやカスタム情報を保存するためのものです。

あなたのケースでは、data-type="template"またはdata-name="template"を追加し、それに基づいて検索して削除することができます。 <template>タグを削除するように書くのと同じような単純な関数ですが、規則を破ることはありません。

だから、あなたの例を使用して、<div data-type="template" class="hidden"></div>

Answer 2

最近のブラウザは、一般的にそれらを解析し、要素はスタイルとスクリプトで処理できるように、DOMノードを構築するという意味でのカスタムタグを「サポート」。

主な問題は、IE 9より前のIEですが、カスタムタグ名ごとにdocument.createElement('...')を1回使用して処理できます。

バリデーターはタグをエラーとして報告し、そのようなエラーがある場合は、マークアップで実際のエラーを気付かないことがあります。原則として、これに対処する独自のDTDを作成することができます（HTML DTDジェネレータが構築中ですが、予想よりもトリッキーです...）。

これらの予約では、クラスを使用する場合と比べて本質的にジョブを単純化する場合は、カスタムタグを使用します。