199

次のように、HTML5 でカスタム タグが有効かどうかについて、明確な答えを見つけることができませんでした。

<greeting>Hello!</greeting>

いずれにせよ、仕様には何も見つかりませんでした：

http://dev.w3.org/html5/spec/single-page.html

また、カスタム タグは W3C バリデーターで検証されないようです。

4

12 に答える 12

177

Custom Elements 仕様はChrome と Opera で利用でき、他のブラウザでも利用できるようになっています。カスタム要素を正式な方法で登録する手段を提供します。

カスタム要素は、作成者が定義できる新しいタイプの DOM 要素です。ステートレスで一時的なデコレータとは異なり、カスタム要素は状態をカプセル化し、スクリプト インターフェイスを提供できます。

カスタム要素は、テンプレート、HTML インポート、Shadow DOM とともにWeb Componentsと呼ばれるより大きな W3 仕様の一部です。

Web コンポーネントを使用すると、Web アプリケーションの作成者は、CSS だけでは不可能なレベルの視覚的な豊かさと対話性を備えたウィジェットを定義でき、今日のスクリプト ライブラリでは不可能な構成と再利用が容易になります。

ただし、Custom Elements v1 に関する Google Developers の優れたウォークスルー記事から:

カスタム要素の名前には、ダッシュ ( -) が含まれている必要があります。したがって<x-tags>、<my-element>、 、および<my-awesome-app>はすべて有効な名前ですが、<tabs>およびは有効で<foo_bar>はありません。この要件は、HTML パーサーがカスタム要素と通常の要素を区別できるようにするためのものです。また、新しいタグが HTML に追加されたときの上位互換性も保証されます。

いくつかのリソース

于 2012-03-23T19:08:06.260 に答える
24

それは可能であり、許可されています:

ユーザー エージェントは、理解できない要素と属性を意味的に中立なものとして扱わなければなりません。それらを DOM に残し (DOM プロセッサの場合)、CSS に従ってスタイル設定します (CSS プロセッサの場合)。ただし、それらから意味を推測することはありません。

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

ただし、インタラクティブ機能を追加する場合は、IE 7 および 8 に対応するために、ドキュメントを無効にする (ただし、完全に機能する) 必要があります。

http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (私のブログ)を参照してください。

于 2012-10-17T14:02:04.937 に答える
15

注: 以下の回答は、2012 年に書かれた時点では正しいものでした。それ以来、状況は少しずつ進んでいます。HTML 仕様では、「自律カスタム要素」と「カスタマイズされた組み込み要素」の 2 種類のカスタム要素が定義されるようになりました。前者は、フレージング コンテンツが期待される場所であればどこでも使用できます。body 内のほとんどの場所ですが、ul または ol 要素の子、または td、th、または caption 要素以外の table 要素ではありません。後者は、それらが拡張する要素がどこにでも行くことができます。

これは実際には、要素のコンテンツ モデルの蓄積の結果です。

たとえば、ルート要素は要素である必要がありhtmlます。

この要素には、body 要素が後に続く head 要素htmlのみを含めることができます。

要素には、フロー コンテンツが要素として定義されているフロー コンテンツbodyのみを含めることができます。 a, abbr, address, area (マップ要素の子孫の場合), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details 、dfn、div dl、em、埋め込み、フィールドセット、図、フッター、フォーム、h1、h2、h3、h4、h5、h6、ヘッダー、hgroup、hr、i、iframe、img、入力、ins、kbd、keygen、 label、map、mark、math、menu、meter、nav、noscript、object、ol、output、p、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、style (スコープ属性が存在する場合)、sub、sup、svg、table、textarea、time、u、ul、var、video、wbr、Text

等々。

コンテンツ モデルは、カスタム要素/タグに必要な「好きな要素をこの要素に配置できます」とは決して言いません。

于 2012-03-24T03:20:23.747 に答える
15

基本的なカスタム要素と属性

カスタム要素と属性は、次の条件で HTML で有効です。

  • 要素名は小文字で始まり、x-
  • 属性名は小文字で始まり、data-

たとえば、<x-foo data-bar="gaz"/>または<br data-bar="gaz"/>.

要素の一般的な規則は次のとおりですx-foo。x-vendor-featureがおすすめ。

開発者が要素の登録に伴うすべての機能を必要とすることはほとんどないため、これでほとんどのケースに対応できます。構文も十分に有効で安定しています。詳しい説明は以下。

高度なカスタム要素と属性

2014 年の時点で、カスタム要素と属性を登録するための大幅に改善された新しい方法があります。IE 9 や Chrome/Firefox 20 などの古いブラウザーでは機能しません。ただし、標準HTMLElementインターフェイスを使用し、衝突を防ぎ、非名前x-*と非data-*名前を使用し、ブラウザーが尊重するカスタムの動作と構文を定義できます。 . 以下のリンクで詳しく説明されているように、少し手の込んだ JavaScript が必要です。

HTML5 Rocks - HTML の新しい要素の定義
WebComponents.org - カスタム要素の紹介
W3C - Web コンポーネント: カスタム要素

基本構文の妥当性について

カスタム属性名の使用data-*は、しばらくの間完全に有効であり、古いバージョンの HTML でも機能します。

W3C - HTML5: 拡張性

カスタムの (未登録の) 要素名については、W3C はそれらを使用しないことを強く推奨しており、それらは非準拠であると見なしています。ただし、ブラウザーはそれらをサポートする必要があり、x-*識別子が将来の HTML 仕様と競合したり、x-vendor-feature識別子が他の開発者と競合したりすることはありません。カスタム DTD を使用して、うるさいブラウザを回避できます。

公式ドキュメントからの関連する抜粋を次に示します。

「適用可能な仕様は、新しいドキュメント コンテンツ (たとえば、foobar 要素) を定義することができます [...]。特定の準拠 HTML5 ドキュメントの構文とセマンティクスが、適用可能な仕様の使用によって変更されない場合、そのドキュメントは準拠 HTML5 のままです。資料。"

「ユーザー エージェントは、理解できない要素と属性を意味的に中立なものとして扱わなければなりません。それらを DOM に残し (DOM プロセッサの場合)、CSS に従ってスタイリングします (CSS プロセッサの場合)。ただし、それらから意味を推測することはありません。」

「ユーザー エージェントは、準拠していないドキュメントを好きなように自由に処理することはできません。この仕様で説明されている処理モデルは、入力ドキュメントの準拠に関係なく、実装に適用されます。」

「この仕様で定義されていない HTML 要素には、HTMLUnknownElement インターフェイスを使用する必要があります。」

W3C - HTML5: 準拠文書
WhatWG - HTML 標準: DOM 要素

于 2016-01-24T03:59:33.187 に答える
11

このコンテキストでは、「有効な」という言葉には 2 つの異なる意味があり、どちらも有効である可能性があることを指摘したいと思います。

  1. カスタム タグを含む HTML ドキュメントは有効な HTML5 と見なされますか? これに対する答えは明らかに「いいえ」です。仕様には、どのタグがどのコンテキストで有効かが正確にリストされています。これが、HTML バリデーターが、カスタム タグを含むドキュメントや、標準タグが間違った場所にあるドキュメント (ヘッダーの "img" タグなど) を受け入れない理由です。

  2. カスタム タグを含む HTML ドキュメントは、ブラウザー間で明確に定義された標準的な方法で解析およびレンダリングされますか? ここで、おそらく驚くべきことに、答えは「はい」です。ドキュメントは技術的には有効な HTML5 とは見なされませんが、HTML5 仕様では、ブラウザーがカスタム タグを見たときに何をすべきかを正確に指定しています<span>。デフォルトですが、HTML でスタイルを設定し、javascript でアクセスできます。

于 2016-08-03T19:24:50.723 に答える
5

カスタム HTML 要素は、私が貢献してきた新しい W3 標準であり、カスタム要素を宣言してパーサーに登録できるようにします。仕様はこちらで読むことができます: W3 Web Components Custom Elements spec . さらに、Microsoft はX-Tagと呼ばれる (元 Mozilla 開発者によって作成された) ライブラリをサポートしています。これにより、Web コンポーネントの操作がさらに簡単になります。

于 2012-10-15T18:20:39.943 に答える
3

HTML5 仕様の Extensibility セクションからの引用:

XML シリアライゼーションに限定でき、HTML シリアライゼーションでサポートする必要がないマークアップ レベルの機能については、ベンダーは名前空間メカニズムを使用して、非標準の要素と属性がサポートされるカスタム名前空間を定義する必要があります。

したがって、HTML5 の XML シリアル化を使用している場合、次のようなことを行うのは合法です。

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

ただし、HTML 構文を使用している場合、できることははるかに制限されます。

HTML 構文での使用を意図したマークアップ レベルの機能の場合、拡張は「x-vendor-feature」という形式の新しい属性に制限する必要があります [...] 新しい要素名を作成しないでください。

しかし、これらの指示は主にブラウザー ベンダーに向けられており、ブラウザー ベンダーは、作成することを選択したカスタム要素に視覚的なスタイルと機能を提供していると想定されます。

ただし、作成者にとっては、(少なくとも XML シリアライゼーションでは) カスタム要素をページに埋め込むことは合法かもしれませんが、DOM ではノード以上のものを取得することはできません。カスタム要素で実際に何かを実行したり、特別な方法でレンダリングしたりしたい場合は、カスタム要素の仕様を確認する必要があります。

この件に関するより穏やかな入門書として、Web Components Introductionをお読みください。これには、Shadow DOM およびその他の関連仕様に関する情報も含まれています。これらの仕様は、現時点ではまだ作業中のドラフトです。現在のステータスはこちらで確認できますが、積極的に開発が進められています。

例として、greeting要素の単純な定義は次のようになります。

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

これは、要素のコンテンツを引用符で囲んでレンダリングするようにブラウザに指示し、プレフィックスとして「Simon said:」というテキストを付けます。このテキストは灰色でスタイル設定されています。通常、このようなカスタム要素の定義は、リンクを使用してインポートする別の html ファイルに保存されます。

<link rel="import" href="greeting-definition.html" />

必要に応じてインラインで含めることもできますが。

ここで見ることができる Polymer ポリフィル ライブラリを使用して、上記の定義の実際のデモを作成しました。これは古いバージョンの Polymer ライブラリを使用していることに注意してください。最近のバージョンでは動作がまったく異なります。ただし、仕様はまだ開発中であるため、これを製品コードで使用することはお勧めしません。

于 2013-07-16T21:53:08.320 に答える
1

data-*属性はHTML5で有効であり、HTML4 でさえ、すべての Web ブラウザーがそれらを尊重していました。新しいタグを追加することは技術的には問題ありませんが、次の理由からお勧めしません:

  1. 今後追加されるものと競合する可能性があり、
  2. JavaScript によって動的に追加されない限り、HTML ドキュメントを無効にします。

私は、Google が気にしない場所でのみカスタム タグを使用します。ゲーム エンジンの iframe の ecample では、, と - を含むタグを作成しましたが、JavaScript のみを<log>使用します。バリデータによると、それは完全に有効でした。そのスタイリングにより、Internet Explorer でも動作します。;]<msg><error><warning>

于 2013-01-01T03:31:12.187 に答える
1

カスタム タグは HTML5 では無効です。しかし、現在、ブラウザーはそれらを解析することをサポートしており、css を使用してそれらを使用することもできます。そのため、現在のブラウザでカスタム タグを使用したい場合は、それが可能です。ただし、ブラウザーが HTML コンテンツの解析に厳密に W3C 標準を実装すると、サポートが取り除かれる可能性があります。

于 2013-07-17T13:03:10.747 に答える
1

この質問が古いことは知っていますが、私はこの主題を研究してきました。上記のステートメントのいくつかは正しいですが、カスタム要素を作成する唯一の方法ではありません。例えば：

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

完全に正常に動作します (これまでの Google Chrome、IE、FireFox、およびモバイル Safari の新しいバージョンで)。必要なのは、タグを開始するための英字 (az、AZ) だけです。その後、英字以外の任意の文字を使用できます。CSS の場合、必要な Query\^ { ... } のように、要素を見つけるために "\" (バックスラッシュ) を使用する必要があります。しかし、JS では、自分が見ているように呼び出すだけです。これが役立つことを願っています。ここで例を参照してください

・ミンクCBOS

于 2014-11-03T19:19:56.623 に答える