目次に戻る

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

全体概要

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

下記の種類がある。

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

W3C : HTML5.3フォーム関連カスタム要素という概念は存在してなかった。

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

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

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

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

アクセシビリティ関連

私見・補足

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

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

表示確認

ソース

  <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以内のランダムな整数を表示します。

未対応ブラウザでは何も表示されない。