web-dev-qa-db-ja.com

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

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

<greeting>Hello!</greeting>

私は仕様に何らかの形で何も見つかりませんでした：

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

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

htmlcustom-element
170
d13

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

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

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

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

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

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

一部のリソース

161
jessegavin

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

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

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

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

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

21
svidgen

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

たとえば、 ルート要素はhtml要素でなければなりません。

html要素には、 ヘッド要素とそれに続くbody要素のみを含めることができます。

body要素には Flow content のみを含めることができます。ここで、フローコンテンツは要素として定義されます： a、 abbr、住所、エリア（マップ要素の子孫の場合）、記事、脇、音声、b、bdi、bdo、blockquote、br、ボタン、キャンバス、引用、コード、コマンド、データリスト、del、詳細、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、マップ、マーク、数学、メニュー、メーター、nav、noscript、オブジェクト、ol、出力、p、pre、progress、q、Ruby、s、samp、script、section、select、small、span、strong、style（ifスコープ属性が存在する）、sub、sup、svg、table、textarea、time、u、ul、var、video、wbr、およびText

等々。

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

15
Alohci

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

カスタム要素と属性は、次の条件を満たしている場合、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要素

11
Beejor

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

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

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

10
Josh

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

5
csuwldcat

最新のページを反映した最新の回答を提供するため。

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

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

<my-element>

2）埋め込みXML

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

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

これらの簡単な制限を考慮すると、HTMLマークアップを有効に保つために最善を尽くすことが理にかなっています（<img>や<hr>などのタグを閉じるのをやめてください。必要はありません）。

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

4
Henrik Vendelbo

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

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 says：」の前にグレーのスタイルが付けられます。通常、このようなカスタム要素の定義は、リンクとともにインポートする別のhtmlファイルに保存されます。

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

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

Polymer polyfillライブラリを使用して上記の定義の実際のデモを作成しました。これは here です。これは、古いバージョンのPolymerライブラリを使用していることに注意してください-より新しいバージョンの動作はまったく異なります。ただし、まだ仕様が開発中であるため、これは本番コードで使用することをお勧めしません。

3
James Holderness

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

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

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

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の新しいバージョンでは）完璧に動作します。必要なのは、タグを開始するためのアルファベット文字（a〜z、A〜Z）だけです。その後は、その後にアルファベット以外の文字を使用できます。 CSSの場合、Query\^ {...}が必要になるなど、要素を見つけるために「\」（バックスラッシュ）を使用する必要があります。しかし、JSでは、あなたはそれをあなたがそれを見る方法と呼ぶだけです。これがお役に立てば幸いです。例を参照してください here

-ミンクCBOS

1
Ephellon Dantzler

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

1
Nisarg Shah

dom宣言なしであなたが望むものを使うだけです

<container>content here</container>

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

0
Erick Boileau