ハロー・カスタム・エレメント

カスタム・エレメントを始めよう。

中級

出版された：

2023年2月26日

によって

アンカー 1

開発者を雇う

説明例

カスタム要素を使用すると、Webコンポーネントをページに埋め込むことができます。この例では、ページからカスタムエレメントへ、カスタムエレメントからページへの情報送信を実演します。

カスタムエレメントは、ドメインが接続されたプレミアムサイトでのみ完全に機能することに注意してください。

コード例

タブ1

タブ2

タブ3

このコードによる解決は複雑になる可能性がある。

信頼できるベロ開発者を雇う

どのように構築したか

ページ要素

トップページを2つのセクションに分けました。

一番上のセクションには、通常のWix要素が含まれています。2つのテキスト要素があります：1つはラベルとして使用され、もう1つはカスタム要素からページに渡された情報を表示するために使用されます。このセクションには、カスタム要素にメッセージを送信するためのボタンもあります。

一番下のセクションにはカスタム・エレメントがあります。この要素の中にCSSとJavaScriptを使って2つのテキスト要素とボタンを作ります。つのテキスト要素はラベルとして使用され、もう1つはページからカスタム要素に渡された情報を表示するために使用されます。ボタンはページにメッセージを送信するために使用します。

ページコード

HOMEページに2つのイベント・ハンドラを追加した。

最初のイベントハンドラは、ページからカスタム要素にメッセージを送信するボタンがクリックされたときに実行されます。これはWixの `setAttribute()` 関数を使用してメッセージを送信します。

2番目のイベントハンドラはカスタムエレメントからメッセージを受信したときに実行されます。受信したメッセージを ID `message` で text 要素に入力します。

カスタム・エレメント・コード

カスタム要素のコードは、ベロサイドバーのパブリックセクションにあります。

コードは、カスタム要素に追加されるHTML要素を作成するいくつかの関数から始まります。

次に、HTML要素のスタイルを作成する関数がある。

最後に、カスタム要素そのものを定義するクラスがあります。このクラスの中には、カスタム要素にHTML要素を追加するコードがあり、ボタンがクリックされたときにページにメッセージを送信するコードも含まれています。また、ページから送信されたメッセージを処理するコードもあります。