Angular2 css :host applying but not visible in browser

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

@micronyks I have tried it in chrome, firefox & IE - all yield the same result. I don't understand why it's applying, but isn't getting rendered. — Zze, Oct 16 '16 at 05:41
check this https://plnkr.co/edit/ukANx4wcCYFXvx2BXWly?p=preview its working as expected without encapsulation. I also checked with mozilla and its working. — micronyks, Oct 16 '16 at 05:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/125823/discussion-between-micronyks-and-zze). — micronyks, Oct 16 '16 at 05:48
Add `display: block` to your stylesheet, if this works I'll try to elaborate a longer answer — Mauricio Poppe, Oct 16 '16 at 06:43

score 4 · Accepted Answer · edited May 23 '17 at 10:30

4

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.

edited May 23 '17 at 10:30

Community

1
1

answered Oct 16 '16 at 07:54

Mauricio Poppe

4,817
1
22
30

I will check this out as soon as possible - thanks for the answer. – Zze Oct 16 '16 at 08:34

Angular2 css :host applying but not visible in browser

EDIT

1 Answers1