css - Angular2 CSS :host applying but not visible in browser

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 和 firefox 中打开它，我看到以下 CSS 在 example.component 的规则下陈述。

.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

任何具有无法识别的标签名称的组件，如 <crate></crate>创建为 HTMLUnknownElement如果您希望它表现得像 div，所有样式属性都为空值然后添加 display: block;到您的样式表。

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