カスタムタグを作成してHTMLを拡張します

このチュートリアルでは、HTML言語をカスタムタグで拡張することがどれほど簡単かを示します。カスタムタグはさまざまな動作を実装するために使用できるため、コードをより少なくし、HTMLドキュメントをよりシンプルに保つための非常に便利な方法です。 ＆lt; codingdude-gravatar＆gt;

。このカスタムタグには、特定のメールアドレスのGravatar画像が表示されます。 

window.customelements.define（）

。これにより、パーサーは通常の要素をカスタムタグと区別できるようになります。 

カスタム要素タグ名には常にダッシュ（ - ）が必要です。

ステップ2：正しいプロトタイプを選択します

HTMLELEMENT

。上記のコードは次のものに相当します。

カスタム要素を作成する場合、別のHTML要素を拡張する場合、ネイティブ要素をドメックス受信で拡張する必要があります。カスタム要素のインスタンス化

HTML要素のすべての標準ルールがカスタム要素に適用されます。標準要素と同様に、JavaScriptを使用してDOMにカスタム要素を作成するか、HTMLで宣言します。HTMLでカスタム要素を宣言します。 JavaScriptの使用：

5。カスタムタグにマークアップを追加する

マークアップの追加は、カスタムタグではかなり簡単です。まず、親HTML要素を拡張するクラスを作成する必要があります。私たちの場合、htmlelement

を拡張します。カスタムタグのInnertext

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

を使用します。コンストラクターの内部でこれを呼び出すことを忘れないでください。

コンポーネントがどのように見えるかについての簡単な概要を示します。ライフサイクルの方法

カスタムタグにマークアップの追加を開始する前に、カスタムタグに関連付けられたライフサイクルメソッドに注意する必要があります。 4つのライフサイクルコールバックがあります。

ConnectedCallback

。

ConnectedCallback

を使用して、カスタムタグの電子メール属性を確認するために使用できます。要素がドキュメントに追加されるとすぐに、このチェックが行われます。カスタムタグを使用します

電子メール

<codingdude-gravatar></codingdude-gravatar><br>

属性がカスタムタグに設定されています。画面は次のとおりです。

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

astibuteChangedCallback 属性ChangedCallbackに記載されているすべての属性が発射されます。私たちの場合、el.setattribute（ 'email'、 'newemail'）をカスタム要素で、ブラウザはライフサイクルのリストの最後の、これらのプロパティは、デフォルトでカスタム要素に存在します。ただし、これらのプロパティの動作は変更できます。ほとんどの場合、JavaScriptクラスのゲッターとセッターは、プロパティを制御するために使用されます。 

demo

この投稿で説明されているすべては、次のデモで実験できます。

結論

<codingdude-gravatar></codingdude-gravatar><br>

hooray！カスタム要素を作成する方法について、投稿の最後に来ました。これで、カスタム要素を作成し、HTMLマークアップで使用できるはずです。試してみてください！どれだけ達成できるかを確認するには驚かされます。

これは、カスタム要素の仕組みの始まりに過ぎません。この分野で探索して学ぶことがたくさんあります。カスタム要素とその高度な概念に関するその他の投稿のためにこのスペースを見続けてください。

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