コンポーネントAPI

Stencilが提供するAPIは、デコレータ、ライフサイクルフック、レンダリングメソッドのセットに凝縮されています。

デコレータ

デコレータは、コンポーネントに関するすべてのメタデータ、プロパティ、属性、メソッド、イベント、関連するスタイルシートを収集するために、Stencilによって使用される、コンパイラ時のためのAPIです。メタデータが収集されると、すべてのデコレータは出力から削除されるので、実行時のオーバーヘッドは発生しません。

@Component() は、新しいウェブコンポーネントの宣言します。
@Prop() は、公開されたプロパティ/属性を宣言します。
@State() は、コンポーネントの内部状態を宣言します。
@Watch() は、プロパティや状態が変化したときに実行されるフックを宣言します。
@Element() は、ホスト要素への参照を宣言します。
@Method() は、公開されたパブリックメソッドを宣言します。
@Event() は、コンポーネントが発する可能性のあるDOMイベントを宣言します。
@Listen() は、DOMイベントを監視します。

ライフサイクル・フック

apploadイベント

コンポーネント固有のライフサイクルフックに加えて、アプリとそのすべての子コンポーネントの読み込みが完了すると、「appload」と呼ばれる特別なイベントが発行されます。 windowオブジェクトでそのイベントをハンドリングできます。

同じページにStencilアプリがある場合は、 event.detail.namespaceを確認することで、どのアプリがイベントを発行したかを判断できます。これは、Stencilのconfigで設定したnamespace config optionの値になります。

window.addEventListener('appload', (event) => {
  console.log(event.detail.namespace);
});

その他

Host: ホストは、ホスト要素自体に、属性とイベントリスナーを設定するために、render関数のルートで使用できる機能的なコンポーネントです。
h(): これは、JSXを仮想DOM要素に変換するために render() の中で使用されます。
readTask(): これは、JSXを仮想DOM要素に変換するために render() の中で使用されます。DOMの読み込みタスクをスケジュールします。提供されたコールバックは、レイアウトスラッシングを起こさずに、DOMの読み込みを実行するために、最適なタイミングで実行されます。
writeTask(): DOM-write タスクをスケジュールします。提供されたコールバックは、レイアウトスラッシングを起こさずに、DOMの突然変異を実行するために最適なタイミングで実行されます。
forceUpdate(): 状態が変更されていなくても、指定されたインスタンス、または要素の新しいレンダリングをスケジュールします。forceUpdate() は同期しておらず、次のフレームで、DOMレンダリングを実行する可能性があることに注意してください。
getAssetPath(): ローカルアセットへのパスを取得します。使用方法はLocal Assetsページを参照してください。
setMode()
getMode()
getElement()