Angular2 css：主机应用但在浏览器

Question

创建我的第一个Angular2应用时，我遇到了一个奇怪的问题。

我将一些CSS应用于组件主机（example-component），但它没有出现在浏览器中？

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

<小时/> 的 example.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 {}

<小时/> 的的index.html                                     

<小时/> 的 crate.html

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

<小时/> 的 crate.css

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

<小时/> 我不明白的是，我用chrome＆amp; amp; firefox，我在example.component的规则下看到了以下CSS。

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

正确地将CSS应用于example-component，但它没有在浏览器中显示/呈现。我做错了什么/错过了什么？

修改

即使我将crate.css更改为：

，也会出现完全相同的问题

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

Answer 1

具有无法识别的tagName（如<crate></crate>）的任何组件都会创建为HTMLUnknownElement并且所有样式属性都具有空值，如果您希望它的行为类似于div，则添加{ {1}}到样式表。

有关不同浏览器的默认css的其他资源，请参阅Browsers' default CSS for HTML elements。