Angular2 css：主机正在应用，但在浏览器中不可见

我在创建我的第一个

Angular2

应用程序时遇到了一个奇怪的问题

我正在将一些CSS应用于组件主机（

示例组件

），但它没有出现在浏览器中

这是我第一次在SO中发布Angular，所以希望我能提供获得帮助所需的一切。

---

示例.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'crate',
  templateUrl: './app/folderA/folderAB/crate.html',
  styleUrls: ['./app/folderA/folderAB/crate.css']
})
export class MyComponent {}

:host-context(.lg){
    width: 100%;
    background-color: #000;
    border-radius: 25px;
}

---

index.html

---

crater.html

<div class="background">
    <div class="content">
        <p>Content</p>
    </div>
</div>

---

我不明白的是，我在chrome&firefox中打开了它，在

example.component

的规则下看到了下面的CSS

.lg[_nghost-ims-2], .lg [_nghost-ims-2] {
    width: 100%;
    background-color: #000;
    border-radius: 25px;
}

它正确地将CSS应用于

示例组件

，但未在浏览器中显示/呈现。我做错了什么/错过了什么

---

编辑 即使我将

crater.css

更改为：

crate{
    width: 100%;
    background-color: #000;
    border-radius: 25px;
}

---

任何带有无法识别的标记名（如

）的组件都将创建为一个，并且所有样式属性的值都为空，如果您希望它的行为类似于

div

，则添加

display:block到您的样式表

有关不同浏览器的默认css的其他资源，请参阅。
将“styleUrls”更改为“styles”？将主机上下文（.lg）{}

更改为

：主机.lg{}

，然后选中。@micronyks不将其应用于元素。有许多其他方法可以执行此操作。它可以正常工作。可能是浏览器问题。试着用chrome运行。我会尽快检查-谢谢你的回答。