css - Angular 2 : How to style host element of the component?

Question

我在 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%;
}

这两种方法似乎都行不通。

谢谢。

Answer 1

有一个错误，但同时已修复。 :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

另见 Load external css style into Angular 2 Component

/deep/ 和 >>> 不受 Chrome 中已弃用的相同选择器组合器的影响。
Angular 模拟(重写)它们，因此不依赖于支持它们的浏览器。

这也是为什么 /deep/ 和 >>> 不能与 ViewEncapsulation.Native 一起使用，后者启用原生影子 DOM 并依赖关于浏览器支持。