Angular2 css :host applying but not visible in browser
angular, css
Solution
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.
Problem
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; } ```