Angular 2：如何为组件的宿主元素设置样式？

有一个错误，但在此期间已修复。 :host { } 现在工作正常。

还支持的是

:host(selector) { ... } 用于选择器以匹配宿主元素上的属性、类...

:host-context(selector) { ... } 用于选择器匹配元素、类、...在父组件上

选择器 /deep/ 选择器（别名选择器 >>> 选择器不适用于 SASS），用于匹配跨元素边界的样式更新：SASS 正在弃用 /deep/。 Angular（TS 和 Dart）添加了 ::ng-deep 作为替代品，它也与 SASS 兼容。 UPDATE2: ::slotted ::slotted 现在被所有新浏览器支持，并且可以与 `ViewEncapsulation.ShadowDom https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted 一起使用

更新：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 一起使用的原因，ViewEncapsulation.Native 启用本机 shadow DOM 并取决于浏览器支持。

---

我找到了一个解决方案，如何仅设置组件元素的样式。我没有找到任何文档它是如何工作的，但是您可以将属性值放入组件指令中，在“主机”属性下，如下所示：

@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ünter Zöchbauer 所说，有一个错误，现在您甚至可以在 css 文件中设置宿主元素的样式，如下所示：

:host{ ... }

---

查看this issue。我认为当 new template precompilation logic 实施时，该错误将得到解决。目前，我认为您能做的最好的事情是将模板包装到 <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 {}

请参阅this plunker

---

在您的组件中，如果您想要应用一些通用样式，您可以将 .class 添加到您的宿主元素中。

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

---

对于希望为 :host 的子元素设置样式的任何人，这里有一个如何使用 ::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

---