カスタムHTML要素

次の記事では、カスタム Html 要素の概要を説明します。 html には、Web コンポーネント用の機能が多数あります。一部には、ユーザー定義またはカスタムの HTML 要素を作成する標準機能があります。 HTML 言語の機能をさらに高めるために Web ページをカプセル化します。より多くのカスタム Web ページ機能と組み合わせることができるバッチ要素のネストされたセットでは、時間がかかります。一部の Web ブラウザーは、Mozilla、Firefox、Google Chrome、Microsoft Edge ブラウザーなどのカスタム要素をサポートしています。これらは、HTML カスタム要素、safari、および opera でサポートされています。これらのブラウザは HTML カスタム要素と互換性がありません。自律的なユーザー定義要素のみをサポートします。

構文:

HTML に新しいタグを導入するためのグローバル化された要素であるため、カスタム要素と同様に JavaScript を使用して新しい HTML 要素を定義します。したがって、Web ページ要素を使用するときの構文は異なります。

Class sample extends HtmlElement
{
default constructor()
{
---some user defined codes---
}
}

上記のコードは Java ベースのサンプル コードです。これはカスタマイズされた要素を作成するための一般的な概要であり、変更は Web ページの影響を受けます。

カスタム HTML 要素をどこで使用しますか?

一般に、HTML カスタマイズ要素には、自律カスタム要素とカスタマイズされた組み込み要素の 2 つのタイプが含まれます。 HTML でカスタム要素を作成するときは常に、クラスとそのメソッド、属性、プロパティが記述されます。一部のイベントはそのように呼ばれることもあります。カスタマイズされた要素が作成され、それが HTML 要素 (、 などの一部の要素) として組み込みで定義されると、カスタマイズした要素を HTML 言語で使用できるようになります。

自律カスタム要素には、HtmlElement クラスで拡張されたユーザー定義要素を含むすべての新しい要素が含まれています。これには Java 標準ルールが付属します。さらに、カスタマイズされた組み込み要素は、自律カスタム要素内にカスタム要素を作成するための組み込み要素を作成します。 Web ページに要素が追加または削除されるたびに、それをどのように表示するかをブラウザーに伝えます。

自律カスタム要素は、特別なメソッドを持つクラスを使用して上記のシナリオを作成します。たとえば、一部のメソッドは「connectedCallback()」です。このメソッドは、要素がドキュメントに追加されるたびにブラウザ呼び出しに使用されます。また、HTML ドキュメント内で要素が繰り返し追加または削除されると、何度も呼び出される可能性があります。」 「disconnectedCallback()」このメソッドは、要素がドキュメントから削除されるたびにブラウザを呼び出します。また、HTML ドキュメント内で要素を繰り返し追加または削除するために何度も呼び出すこともできます。

observedAttributes() は、反映された変更を監視するために属性名の配列を返すメソッドの 1 つです。attributeChangedCallback(name,oldvalue,newvalue) メソッドは、属性のいずれかがリストされ、変更されるときに呼び出します。 AdoptCallback()」は、要素が HTML ドキュメント内の新しい要素に移動されるたびに呼び出されます。ここで、任意の html 要素を使用するとします。その場合、 などのタグがあります。 タグのインスタンスを作成します。タグには JavaScript を使用して MyElement があり、インスタンスを作成しました。そのインスタンスを使用して、上記のメソッドを使用して必要なメソッドを呼び出します。JavaScript を使用して Web ページでその機能を使用します。

time> などのデフォルトのタグを使用して、HTML で日付と時刻の計算を使用しているとします。は時間のタグ要素です。ただし、その時間に自動的に時刻形式が設定されるわけではありません。 ConnectedCallback(); のようなメソッドを使用します。このメソッドは、 に対して呼び出すことでブラウザを使用します。オプション、および要素がページに追加されるか、HTML パーサーが検出するのに役立ちます。 dateFormatter の Intl.DateTimeFormat オプションの組み込みオプションが使用されます。これはブラウザ全体をサポートし、時間形式で適切に表示するのに役立ちます。また、customElements.define (タグ名、クラス名) で新しい HTML 要素を宣言します。この形式は、スクリプト内でカスタム要素を作成するのに役立ちます。

カスタム要素を作成した後、PC の時間更新などの形式全体をアップグレードする必要もありますが、エラーではないため、customElements.define メソッドの html 要素がスクリプトで使用されなくなる前に更新されます。要素は、非標準の HTML タグと呼ばれるのと同じように、不明として表示されます。その後、customElements.define メソッドが呼び出された後、:not(:define) のような CSS スタイル セレクターで使用され、サポートされる時刻形式オプションで新しいインスタンスがアップグレードされます。 ConnectedCallback() メソッドも呼び出されると、次のようになります。customElements.get(name)、customElements.whenDefined(name) と呼ばれるメソッドと同様に定義されたステータスとなり、どちらのメソッドも引数として名前を返します。

Examples of Custom Html Element

Different examples are mentioned below:

Example #1

<script>
class sample extends HTMLElement { // (1)
connectedCallback() {
let d = new Date(this.getAttribute('datetime') || Date.now());
this.innerHTML = new Intl.DateTimeFormat("default", {
month: this.getAttribute('month') || undefined,
day: this.getAttribute('day') || undefined,
year: this.getAttribute('year') || undefined,
minute: this.getAttribute('minute') || undefined,
hour: this.getAttribute('hour') || undefined,
timeZoneName: this.getAttribute('time-zone-name') || undefined,
second: this.getAttribute('second') || undefined,
}).format(d);
}
}
customElements.define("time-formatted", sample);
</script>

<time-formatted datetime="2020-02-19" year="numeric" month="long" day="numeric" hour="numeric" minute="numeric" second="numeric" time-zone-name="long">
</time-formatted>

Output:

Example #2

<script>
customElements.define('user-information', class extends HTMLElement {
connectedCallback() {
alert(this.innerHTML);
}
});
</script>


<user-information>Sivaraman</user-information>

Output:

Example #3

<script>
class Example extends HTMLButtonElement {
constructor() {
super();
this.addEventListener('click', () => alert("User!"));
}
}
customElements.define('sample-button', Example, {extends: 'button'});
</script>
<button is="sample-button">Welcome</button>
<button is="sample-button" disabled>Disabled</button>

Output:

The above three examples will discuss the custom elements in the html languages; In the first example, we already know about the time and date format output using custom tag elements; the second example shows a basic javascript function called after executing the custom elements in the html and final example will be discussed about the same javascript function while we are clicking the html custom tag elements.

Conclusion

The Web components have some processes for connecting with the technologies. It will be used to help the html for reusable purposes across the entire web.Html have the Dom components; it will be used for communicating the user-level data(including custom elements) through the web for data migration.

以上がカスタムHTML要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。