inject-host コンポーネント
Web Components の isolation のため、スロット内の要素のスタイルを直接変更することは困難です。この問題に対処するため、ofa.js では inject-host というコンポーネントを提供しています。inject-host コンポーネントはホスト層にスタイルを注入することで、コンポーネントの外観をより柔軟に構成することができます。
注意が必要なのは、このコンポーネントを使用すると、ホストレイヤーのスタイルに影響を与える可能性があることです。そのため、スタイルの侵入時には適切な命名規則を守り、ホストのスタイルに影響を与えないようにする必要があります。
例では、comp-twoコンポーネントを定義し、内部でinject-hostコンポーネントを使用してスタイルを注入しています。これにより、注入されたスタイルを使用してcomp-twoコンポーネント内の要素のスタイルを設定することができ、他のコンポーネントに影響を与えることはりません。
同時、以下の内容にも特に注意が必要です。
inject-host内に<style>タグを追加することで、コンポーネント内で特定のスタイルを定義することができます。これらのスタイルは、現在のコンポーネントの要素にのみ影響を与え、他のコンポーネントには波及しません。- スタイルを注入する際には、他のコンポーネントのスタイルに影響を与えないように、一般的すぎるセレクタの使用を避ける必要があります。セレクタの一意性と特異性を維持する必要があります。
inject-hostは、外部のスタイルシートファイルも注入することができます。<link rel="stylesheet" href="target/style.css">のような方法で行います。
例文：対訳見本で、comp-two コンポーネント内の inject-host を使うことで、他のコンポーネントのスタイルを崩さずに、柔軟にコンポーネント内部のスタイルを設定および適用することができます。