css - 親からスタイルを適用

Question

このテンプレートを持つコンポーネントがあるとします:

<div class="frame">
  <span class="user-defined-text">{{text}}</span>
</div>
<style>
  span { font-size: 3em; }
  .frame { ... }
</style>

コンポーネントに適用されたスタイルをマージするにはどうすればよいですか。

<custom-component [text]="'Some text'">
<style>custom-component { font-weight: bold; }</style>

最終出力の「テキスト」が太字で3em のサイズになるようにするにはどうすればよいですか?

さらに良いのは、ホスト要素の計算されたスタイルを取得する方法です。たとえば、background-colorホストの をborder-colorテンプレート内の要素の に適用できますか?