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

Question

I am having a bizarre issue whilst creating my first Angular2 app.

I am applying some CSS to a component host ( example-component ) yet it doesn't appear in the browser?

This is my first time posting for Angular in SO, so hopefully I include everything needed to attain some help.

---

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; } 

---

What I don't understand, is that I open this in chrome & firefox, and I see the following CSS stated under rules for example.component .

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

It is correctly applying the CSS to example-component , but it is not being displayed / rendered in browser. What am I doing wrong / missing?

---

EDIT

The exact same issue applies even if I change crate.css to:

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

Answer 1

Any component with an unrecognized tagName like <crate></crate> is created as a HTMLUnknownElement and has empty values for all the style properties, if you want it to behave like a div then add display: block; to your stylesheet.

See Browsers' default CSS for HTML elements for additional resources on the default css for different browsers.