カスタム要素：HTML Living Standard各要素別メモ

全体概要

カスタム要素（custom element）は、HTML文書作成者が、スクリプトを用いて任意に作成する要素である。

下記の種類がある。

カスタム化組込要素（customized built-in element）→既存要素の機能等を拡張して作成されるカスタム要素。拡張の元となった既存要素に、作成されたカスタム化組込要素が持つ機能等を、is属性を用いて取り込む形で使用されるので、独自タグを用いることはない。
自律的カスタム要素（autonomous custom element）→独自の要素名を持つタグを用いる。
フォーム関連カスタム要素（form-associated custom element）→自律的カスタム要素のうち、フォーム部品となりうる要素として作成されたもの。

カスタム要素の要素名は、小文字の英文字から始まって、途中に必ず「-」（ハイフン）を含まなければならず、大文字の英文字は不可。なお、Foreign elementには、要素名にハイフンを含む要素があるので、それらと一致しないようにしなければならない。

自律的カスタム要素の概要

カテゴリー

Flow content
Phrasing content
Palpable content
フォーム関連カスタム要素である場合は、以下にも該当。
- Form-associated element

配置できる場所

上記カテゴリーの要素が置ける場所。

内容モデル

Transparent

属性

グローバル属性（ただし、is属性を除く）
フォーム関連カスタム要素である場合は、
- name→送信用名前文字列。属性値にisindexを指定してはならない。
- disabled→ブーリアン属性。指定されたフォームコントロールは無効となる（入力できなくなり、送信値はフォーム送信されない）。この状態は、スクリプトを用いないと解除できない。
- form→同一HTML文書内にあるform要素のid属性値。所属フォームを指定する。
- readonly→ブーリアン属性。指定されれば、制約検証の対象外となる。この要素においてはそれ以外の効果はないのがデフォルトだが、HTML文書作成者は、可能である限り、この属性が存在する場合は、何らかの適切な方法によって当該フォームコントロールを編集不可にすべきである。
作成者がスクリプトを用いて任意に定義する名前空間を持たないその他の属性。ただし、その属性名は、大文字の英文字を含んではならず、かつ、XML-compatibleでなければならない。

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

フォーム関連カスタム要素でない場合は、
- 作成スクリプトによりroleが定義されているときは、
  - デフォルトroleは、定義されたrole。デフォルトroleをrole属性値に指定することは、推奨されない。
  - デフォルトrole以外のroleは、指定不可。
- そうでないときは、
  - デフォルトroleは、generic。デフォルトroleをrole属性値に指定することは、推奨されない。
  - デフォルトrole以外では、すべてのroleが指定可能。
フォーム関連カスタム要素である場合は、
- 作成スクリプトによりroleが定義されているときは、
  - デフォルトroleは、定義されたrole。デフォルトroleをrole属性値に指定することは、推奨されない。
  - デフォルトrole以外のroleは、指定不可。
- そうでないときは、
  - デフォルトroleは、generic。デフォルトroleをrole属性値に指定することは、推奨されない。
  - デフォルトrole以外では、button、checkbox、combobox、group、listbox、progressbar、radio、radiogroup、searchbox、slider、spinbutton、switch、textboxを指定可。
- disabled属性が指定されている場合は、aria-disabled属性を指定すべきではない。
- disabled属性が指定されている場合は、aria-disabled属性値にfalseを指定してはならない。
- readonly属性が指定されている場合は、aria-readonly属性を指定すべきではない。
- readonly属性が指定されている場合は、aria-readonly属性値にfalseを指定してはならない。

制約検証

フォーム関連カスタム要素である場合は、
- 独自の制約条件は、作成スクリプトで付与する。
- disabled属性があれば、制約検証の対象から除外。
- readonly属性があれば、制約検証の対象から除外。

意味・用法

作成スクリプトで付与された機能等を持つ。

フォーム関連カスタム要素の場合は、送信値は、作成スクリプトで定義する。

アクセシビリティ関連

未対応のユーザーエージェントにおいても、自律的カスタム要素の内容は表示されるはずなので、それがかえって不都合あるいは無意味なのであれば内容は空にしておく。

私見・補足

自律的カスタム要素にコンピューターにも分かるように意味を付与したい場合は、WAI-ARIAのrole属性を設定するか、MicrodataやRDFaを用いる。

わざわざフォーム関連カスタム要素なんて概念を設けなくても、既存のフォーム関連要素を改造したカスタム化組込要素で用は足りる気がするのだが。

表示確認

ソース


  <script>
    class RandomElement extends HTMLElement {
      constructor() {
        super();
        this.addEventListener("click", () => {
          this._updateRendering();
        });
      }
      connectedCallback() {
        this._updateRendering();
      }
      _updateRendering() {
        this.setAttribute("style", "cursor: pointer");
        var random = Math.round(Math.random() * 999);
        this.textContent = random;
      }
    }
    customElements.define("random-element", RandomElement);
  </script>
  <div>↓クリックするたびに999以内のランダムな整数を表示します。</div>
  <div style="width: 2.5em; text-align: right;"><random-element></random-element></div>

表示結果

↓クリックするたびに999以内のランダムな整数を表示します。