コンポーネントを作成する
ofa.jsにおいて、コンポーネントはページの再利用とモジュール化を実現するための中核となるメカニズムです。コンポーネントは本質的にカスタムWeb Componentであり、テンプレート、スタイル、ロジックを定義することで、再利用可能なUI要素を作成できます。
コンポーネントの基本構造
ページモジュールとは異なり、コンポーネントモジュールの <template> 要素は component 属性を使用し、tag 属性でコンポーネントのタグ名を指定します。
コンポーネントを使用する場所では、l-m タグを使ってコンポーネントモジュールを非同期で読み込み、システムが自動的に登録を行います。その後、通常のHTMLタグのようにそのコンポーネントを直接使用できます。
{{title}}
コンポーネントの核心概念
tag - コンポーネントタグ名
tag はコンポーネントのタグ名であり、コンポーネントの使用タグ名と一致しなければなりません。例えば、コンポーネントの tag が "demo-comp" と定義されている場合、HTML で使用する際には <demo-comp></demo-comp> と記述する必要があります。
コンポーネントモジュール参照
l-m タグを使用してコンポーネントモジュールを導入すると、コンポーネントモジュールは自動的にコンポーネントを登録します。これは script タグを使用してスクリプトを導入するのと似ていますが、l-m はコンポーネントモジュールの読み込みと登録に特化しています。
注意：
l-m参照タグは非同期参照であり、ページの読み込み時にコンポーネントを必要に応じてロードするのに適しています。
同期参照コンポーネント
特定のシナリオでは、コンポーネントを同期的に読み込む必要がある場合があります（たとえば、使用する前にコンポーネントの登録が完了していることを保証するなど）。その場合は、load メソッドと await キーワードを組み合わせて同期的な参照を実現できます。
コンポーネントモジュールとページモジュールには、自動的に load 関数が注入され、開発者が必要なリソースを同期的にロードできるようになります。
{{title}}
非同期参照 vs 同期参照
| 参照方法 | キーワード | 特徴 |
|---|---|---|
| 非同期参照 | l-m タグ |
非ブロッキング読み込み、コンポーネントのオンデマンド読み込みに適する |
| 同期参照 | load メソッドと await キーワード |
ブロッキング読み込み、コンポーネントが使用前に確実に登録される |