There was a bug, but it was fixed in the meantime. :host { }works fine now.

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

Also supported are

还支持

• :host(selector) { ... }for selectorto match attributes, classes, ... on the host element

• :host-context(selector) { ... }for selectorto match elements, classes, ...on parent components

• selector /deep/ selector(alias selector >>> selectordoesn't work with SASS) for styles to match across element boundaries

  • UPDATE:SASS is deprecating /deep/.
    Angular (TS and Dart) added ::ng-deepas a replacement that's also compatible with SASS.

  • UPDATE2:::slotted::slottedis now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

• :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一起使用
    

See also Load external css style into Angular 2 Component

另请参阅将外部 css 样式加载到 Angular 2 组件中

/deep/and >>>are not affectedby the same selector combinators that in Chrome which are deprecated.
Angular emulates (rewrites) them, and therefore doesn't depend on browsers supporting them.

/deep/而>>>在不影响通过在Chrome中被弱化了相同的选择组合程序。
Angular 模拟（重写）它们，因此不依赖于支持它们的浏览器。

This is also why /deep/and >>>don't work with ViewEncapsulation.Nativewhich enables native shadow DOM and depends on browser support.

这也是为什么/deep/并且>>>不使用ViewEncapsulation.Native它启用本机 shadow DOM 并取决于浏览器支持的原因。

I have found a solution how to style just the component element. I have not found any documentation how it works, but you can put attributes values into the component directive, under the 'host' property like this:

我找到了一个解决方案，即如何仅设置组件元素的样式。我还没有找到它是如何工作的任何文档，但是您可以将属性值放入组件指令中，在 '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;
}

UPDATE: As Günter Z?chbauer mentioned, there was a bug, and now you can style the host element even in css file, like this:

更新：正如 Günter Z?chbauer 所提到的，存在一个错误，现在您甚至可以在 css 文件中设置宿主元素的样式，如下所示：

:host{ ... }

Check out this issue. I think the bug will be resolved when new template precompilation logicwill be implemented. For now I think the best you can do is to wrap your template into <div class="root">and style this div:

看看这个问题。我认为当实现新的模板预编译逻辑时，该错误将得到解决。现在我认为你能做的最好的事情就是将你的模板包装成<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 {}

See this plunker

看到这个 plunker

In your Component you can add .class to your host element if you would have some general styles that you want to apply.

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

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

For anyone looking to style child elements of a :hosthere is an example of how to use ::ng-deep

对于任何想要设计 a 的子元素样式的人来说，:host这里是一个如何使用的示例::ng-deep

:host::ng-deep <child element>

:host::ng-deep <child element>

e.g :host::ng-deep span { color: red; }

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

As others said /deep/is deprecated

正如其他人所说的/deep/已弃用

Try the :host > /deep/ :

试试 :host > /deep/ ：

Add the following to the parent.component.less file

将以下内容添加到 parent.component.less 文件中

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

Replace the app-child-component by your child selector

用你的子选择器替换 app-child-component