コンポーネントの作成と使用
一旦ofa.jsの読み込みが完了すると、グローバルに load-module という名前のコンポーネントが登録されます。これには、略語 l-m を使用して参照することができます。使用方法は、script タグと似ており、開発したコンポーネントのアドレスを src 属性で参照します。
今、私たちのコンポーネントの作成を始めましょう。最初に、コンポーネント名と同じ名前のHTMLファイルを作成してください。
では、テキストを翻訳します。コンポーネントファイルで、最初に template 要素を追加し、component 属性を追加します。コンポーネントにレンダリングする必要があるコンテンツをこの template 要素の内部に配置します。最終的に、このコンテンツはコンポーネンの Shadow DOM 内にレンダリングされます。Shadow DOM は外部環境との隔離が行われ、外部環境への汚染を防ぎます。
次に、l-m コンポーネントを使用して、あなたが開発したコンポーネントを参照するだけです。ページ上では、定義したコンポーネントタグを直接使用します。
注意しなければいけないのは、登録されたコンポーネント名は小文字の英字と - 記号のみ使用でき、そして少なくとも - を含める必要があります。この命名規則に従う必要があります。
この例を通じて、my-comp という名前のコンポーネントを作成し、別のページで使用する方法を理解することができます。また、外部のCSSファイルをリンクすることで、コンポーネントのスタイルを設定することもできます。