カスタム要素。
フレージング内容が期待される場所。
透過的。
※ is属性を除く。
名前空間を持たないその他の属性（文参照）。
自律カスタム要素は特別な意味を持たない： その要素の子を表す。カスタマイズされた組み込み要素は、それが拡張した要素のセマンティクスを継承する。
要素の著者によって決定された、要素の機能に関連する名前空間なしの属性は、属性名が XML 互換、かつ ASCII 大文字を含まない限り、自律カスタム要素上で指定してもよい。例外は is 属性であり、これは自律カスタム要素に指定してはならない（かつ指定しても何の効果もない）。
カスタマイズされた組み込み要素は、それらが拡張する要素に基づいて、属性に関する通常の要件に従う。カスタム属性ベースの動作を追加するには、data-* 属性を使用する。
フォーム関連フィールドが true に設定されているカスタム要素定義に要素が関連付けられている場合、自律カスタム要素はフォームに関連付けられたカスタム要素と呼ばれる。
フォームに関連付けられたカスタム要素のリセット アルゴリズムは、要素、コールバック名 "formResetCallback"、および空の引数リストをもつカスタム要素のコールバック反応をキューに加えることである。
妥当なカスタム要素名は、次のすべての要件を満たす一連の文字名である：
[a-z] (PCENChar)* '-' (PCENChar)*
これは、XML仕様由来のEBNF notationを使用している。[XML]
注釈： 上記の名前のリストは、適用可能な仕様、つまり SVG 2 および MathML 由来のすべてのハイフンを含む要素名の要約である。[SVG] [MATHML]
これらの制限とは別に、〈math-α〉や〈emotion-
〉などのユースケースに最大源の柔軟性を与えるために、さまざまな名前が許可されている。
最初に汎用的な HTMLElement クラスを継承して PopUpInfo というクラスを定義する JavaScript ファイルです。
class PopUpInfo extends HTMLElement {
constructor() {
// コンストラクターでは常に super を最初に呼び出してください
super();
// ここに要素の機能を記述します
...
}
}
中身の構築はshadow domをつけるのが一般的な手法です。
// 基礎の組み込みhtml要素からではなく、大本となるHTMLElementから継承する
class PopUpInfo extends HTMLElement {
constructor() {
// Always call super first in constructor
super();
// 自律カスタム要素にshadow domをつけるのが一般的な手法
const shadow = this.attachShadow({ mode: 'open' });
const info = document.createElement('span');
info.setAttribute('class', 'info');
// 自身に渡してきた属性をアクセスすることが可能
const text = this.getAttribute('data-text');
info.textContent = text;
// Create some CSS to apply to the shadow dom
const style = document.createElement('style');
style.textContent = `
.info {
font-size: 0.8rem;
}
`;
// Attach the created elements to the shadow dom
shadow.appendChild(style);
shadow.appendChild(info);
}
}
// カスタム要素を登録する
customElements.define('pop-up-info', PopUpInfo);
ページでの使い方は以下のようです。
<pop-up-info data-text="Your card"></pop-up-info>
使用した感じ：
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META http-equiv="content-language" content="en">
<META http-equiv="content-type" content="text/html; charset=SHIFT_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>Test</TITLE>
</HEAD>
<BODY>
pen
<flag-icon>pen あいうえお</flag-icon>
<SCRIPT>
const flagIcon=document.createElement("flag-icon");
flagIcon.country="jp";
flagIcon.innerText="テキストです";
document.body.appendChild(flagIcon);
</SCRIPT>
</BODY>
</HTML>
<test-tag>てすとです</test-tag>
<SCRIPT>
const testtag=document.createElement("test-tag");
testtag.country="jp";
testtag.innerText="テキストです";
document.body.appendChild(testtag);
</SCRIPT>
フォームに関連付けられたカスタム要素の場合 ─ 要素を FORM 要素に関連付ける。
form 属性は、フォームに関連付けられたカスタム要素をそのフォーム所有者に明示的に関連付けるために使用される。
フォームに関連付けられたカスタム要素の場合 ─ フォームコントロールが無効かどうか。
disabled 属性は、フォームに関連付けられたカスタム要素を非対話的にし、その送信値が送信されないようにするために使用される。
フォームに関連付けられたカスタム要素の場合 ─ willValidate に影響し、カスタム要素の著者によって追加されたすべての動作。
フォームに関連付けられたカスタム要素の readonly 属性は、要素が制約検証から除外されることを指定する。
制約検証。フォームに関連付けられたカスタム要素に readonly 属性が指定されている場合、その要素は制約検証から除外される。
フォームに関連付けられたカスタム要素の場合 ─ フォームの送信および form.elements に使用する要素の名前。
name 属性は、フォームに関連付けられたカスタム要素の名前を表す。
| 表示内容： |
| 表示内容： |