カスタム要素にデータを渡す (ベータ)
カスタム要素は、サードパーティ Web コンポーネントの構成要素です。カスタム要素にデータを渡すには、属性、プロパティ、または lwc:spread ディレクティブを使用します。データを渡すと、LWC ではデフォルトでデータが属性として設定されます。プロパティは存在する場合にのみ設定されます。
this.attachShadow({ mode: 'closed' }) を使用してシャドウコンテンツを初期化するコンストラクタは、一度だけ呼び出されます。属性やプロパティを使用する場合には、次のガイドラインに留意してください。
サードパーティ Web コンポーネントが表示された後は、属性の変更が無視されます。属性を監視し、サードパーティ Web コンポーネントに確実に変更を表示するには、observedAttributes() 静的 getter 関数と attributeChangedCallback() メソッドを使用します。attributeChangedCallback() コールバックは、監視している属性が変更されたときに実行されます。属性データのシリアライズとデシリアライズを処理するには、次の例のように getter および setter を使用します。
属性の変更によってボタンのカウントを増分する例については、こちらを参照してください。
プロパティを利用する場合は、getter および setter を使用します。
たとえば、lwc:spread ディレクティブを使用してプロパティに渡されるカスタム要素があるとします。
このカスタム要素はボタンを表示します。ボタンにイベントリスナーを追加するには、addEventListener() を使用します。
親コンポーネントに、カスタム要素を定義した子コンポーネントが含まれているとします。lwc:spread ディレクティブを使用して、子コンポーネントにプロパティを渡します。
キーと値のペアを持つオブジェクトを使用します。
子コンポーネントで、カスタム要素のインスタンスを作成します。
JavaScript で constructor() をコールして、プロパティを親コンポーネントに公開します。
カスタム要素は次のように表示されます。
サードパーティ Web コンポーネントのスロットにマークアップを渡す操作は、LWC コンポーネントのスロットの場合と似ています。
合成 Shadow のスロット実装は、サードパーティ Web コンポーネントではサポートされていません。
サードパーティ Web コンポーネントにいくつかのマークアップがあるとします。
次のスロット化されたコンテンツが <slot> 要素に表示されます。
コンポーネントは DOM で次のように表示されます。
同様に、名前付きスロットを次のように使用することができます。
マークアップに名前付きスロットを含めます。
コンポーネントは DOM で次のように表示されます。
サードパーティ Web コンポーネントのイベントは、LWC のイベントと同じように動作します。イベントのバインドは、小文字のイベントについてのみサポートされます。小文字以外を使った名前のイベントを使用するには、addEventListener() API を使用するイベントリスナーを追加します。
constructor() にイベントリスナーを追加します。
登録されていないカスタム要素は、ネイティブの HTMLUnknownElement インターフェースのインスタンスとして表示されます。このインターフェースは、HTMLElement を拡張したのもですが、プロパティやメソッドは追加されていません。ブラウザでは、外部コンポーネントが span や div と同様のネイティブコンポーネントとして処理されます。
登録済みのコンポーネントの場合、エンジンが関連するサードパーティ Web コンポーネントを表示し、ブラウザでのアップグレードを遅延させます。
詳細は、HTML 仕様の「Upgrading elements after their creation (要素を作成した後のアップグレード)」を参照してください。
さらに、サードパーティ Web コンポーネントに関するアップグレードの動作についても考慮してください。
- サードパーティ Web コンポーネントがアップグレードされない場合、LWC でマウント時と更新時にその属性が設定されます。
- 遅延アップグレードがある場合は、プロパティの代わりに属性が設定されます。
- アップグレード後、プロパティが存在する場合は、属性の代わりにプロパティが設定されます。