Angular 2：コンポーネントのホスト要素をスタイルする方法は？

Angular 2にはmy-compというコンポーネントがあります。

<my-comp></my-comp>

Angular 2でこのコンポーネントのホスト要素をどのようにスタイルするのですか？

Polymerでは、「：host」セレクターを使用します。Angular 2で試しましたが、うまくいきません。

:host {
  display: block;
  width: 100%;
  height: 100%;
}

コンポーネントをセレクターとして使用してみました：

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

どちらのアプローチも機能していないようです。

ありがとう。

バグがありましたが、それまでは修正されました。:host { }今は正常に動作します。

また、サポートされています

• :host(selector) { ... }selectorホスト要素の属性、クラスなどに一致するために

• :host-context(selector) { ... }以下のためのselector親要素の要素、クラスを一致させます...

• selector /deep/ selector（エイリアスselector >>> selectorはSASSでは機能しません）スタイルが要素の境界を越えて一致する場合

  • 更新： SASSは非推奨です/deep/。
    Angular（TSおよびDart）は::ng-deep、SASSとも互換性のある代替として追加されました。

  • UPDATE2： ::slotted ::slottedすべての新しいブラウザーでサポートされるようになり、 `ViewEncapsulation.ShadowDom https://developer.mozilla.org/en-US/docs/Web/CSS/::slottedで使用できるようになりました
    。

外部CSSスタイルをAngular 2コンポーネントにロードするも参照してください

/deep/そして、>>>されている影響を受けていない Chromeで廃止され、同じセレクタコンビネータによって。
Angularはそれらをエミュレート（書き換え）するため、それらをサポートするブラウザーに依存しません。

これも理由で/deep/あり、動作>>>しないのでViewEncapsulation.Native、ネイティブシャドウDOMが有効になり、ブラウザーサポートに依存します。

コンポーネント要素だけをスタイルする方法を見つけました。どのように機能するかについてのドキュメントは見つかりませんでしたが、次のように 'host'プロパティの下のコンポーネントディレクティブに属性値を配置できます。

@Component({
    ...
    styles: [`
      :host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

更新：GünterZöchbauerが述べたように、バグがあり、cssファイルでも次のようにホスト要素のスタイルを設定できます。

:host{ ... }

この問題を確認してください。新しいテンプレートのプリコンパイルロジックが実装されると、バグは解決されると思います。今のところ、あなたができる最善のことは、テンプレートをラップして<div class="root">これをスタイルすることdivです：

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

このプランカーを見る

適用したいいくつかの一般的なスタイルがある場合は、コンポーネントで.classをホスト要素に追加できます。

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';

:hosthereの子要素のスタイルを検討している人にとっては、使用方法の例です::ng-deep

:host::ng-deep <child element>

例えば :host::ng-deep span { color: red; }

他の人が言って/deep/いるように非推奨です

：host> / deep /を試してください：

以下をparent.component.lessファイルに追加します

:host {
    /deep/ app-child-component {
       //your child style
    }
}

app-child-componentを子セレクターに置き換えます