カスタム要素は有効なHTML5ですか？

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

<greeting>Hello!</greeting>

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

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

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

カスタム要素の仕様は、 ChromeとOperaで利用でき、中に利用可能になって他のブラウザ。カスタム要素を正式に登録する手段を提供します。

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

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

Webコンポーネントの作成者は、Webコンポーネントを使用して、CSSだけでは不可能な視覚的な豊かさと対話性を備えたウィジェットを定義できます。また、今日のスクリプトライブラリでは、簡単に構成および再利用できません。

ただし、カスタム要素v1に関するGoogle Developersのこのウォークスルー記事から：

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

いくつかのリソース

• サンプルWebコンポーネントはhttps://WebComponents.orgで入手できます。
• WebComponents.jsは、あらゆる場所でサポートされるまで、Webコンポーネントのポリフィルとして機能します。WebComponents.jsのgithubページとWebブラウザーサポートの表もご覧ください。

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

ユーザーエージェントは、理解できない要素や属性を意味的に中立として扱う必要があります。それらを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年に書かれたとき、以下の答えは正解でした。それ以来、状況は少し進みました。HTML仕様では、「自律型カスタム要素」と「カスタマイズされた組み込み要素」という2種類のカスタム要素が定義されています。前者は、フレージングコンテンツが期待されるところならどこにでも行くことができます。これはbody内のほとんどの場所ですが、たとえばulまたはol要素の子、またはtd、thまたはcaption要素以外のテーブル要素にはありません。後者は、拡張する要素がどこにでも移動できる場所ならどこでも実行できます。

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

たとえば、ルート要素はhtmlます。

html要素は含まれていてもよいです本体要素続いヘッド素子。

body要素は含まれていてもよいですフローコンテンツフローコンテンツを要素として定義されます。 a、abbr、address、area（map要素の子孫である場合）、article、aside、audio、b、bdi、bdo、blockquote、br、button、canvas、cite、code、command、datalist、del、details 、dfn、div dl、em、embed、fieldset、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、i、iframe、img、input、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

等々。

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

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

カスタム要素と属性は、次の条件が満たされていれば、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要素

「有効な」という言葉は、この文脈では2つの異なる意味を持つ可能性があることを指摘しておきます。

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

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

カスタムHTML要素は、パーサーを使用してカスタム要素を宣言および登録できるようにするために私が貢献してきた新しいW3標準です。仕様については、W3 Webコンポーネントのカスタム要素の仕様を参照してください。さらに、MicrosoftはX-Tagと呼ばれるライブラリ（以前のMozilla 開発者によって作成された）をサポートしています。これにより、Webコンポーネントの操作がさらに簡単になります。

最新のページを反映した更新された回答を提供します。

カスタムタグは、次の場合に有効です。

1）ダッシュが含まれている

<my-element>

2）XMLが埋め込まれている

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

これは、HTML5 doctypeを使用していることを前提としています。 <!doctype html>

これらの単純な制限を考慮すると、HTMLマークアップを有効に保つために最善を尽くすことが理にかなっています（<img>およびなどの終了タグを停止してください<hr>。XHTMLdoctypeを使用しない限り、これはばかげて正しくないため、おそらく必要はありません）。

HTML5が解析ルールを明確に定義していることを考えると、準拠しているブラウザーは、厳密に有効でなくても、スローしたタグを処理できます。

HTML5仕様の拡張性セクションからの引用：

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

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

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

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

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

ただし、これらの手順は主にブラウザーベンダーを対象としています。ブラウザーベンダーは、作成することを選択したカスタム要素に視覚的なスタイルと機能を提供しているはずです。

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

このトピックのより穏やかな入門書については、Webコンポーネントの概要をお読みください。これには、Shadow DOMおよびその他の関連仕様に関する情報も含まれています。これらの仕様は現時点ではまだ草案です-現在のステータスはここで確認できますが、積極的に開発されています。

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

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

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

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

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

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

ドム宣言なしで好きなだけ使用してください

<container>content here</container>

独自のスタイル（display：block）を追加すると、最新のブラウザで動作します

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

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

私はGoogleがゲームエンジンはiframeでecampleため、気にしないということだけの場所でカスタムタグを使用して、私が作っ<log>含まれるタグ<msg>、<error>およびを<warning>-しかし通じたJavaScriptのみ。バリデータによると、それは完全に有効でした。それはそのスタイルでInternet Explorerでも動作します！;]

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

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

<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では、あなたはそれをあなたがそれをどのように見ているかと呼ぶだけです。これがお役に立てば幸いです。こちらの例をご覧ください

-Mink CBOS