Styles not being applied to custom component selectors

[LanceEa]

I'm running into an issue with applying styles to custom elements. I'm not sure if it is a bug or my lack of understanding. I have a simple component called <my-cmp></my-cmp> which I want to apply styles to it as part of the component definition.

Here is an example of my components and what I'm trying to do.

import {Component, CORE_DIRECTIVES} from 'angular2/angular2'

@Component({
  selector: "my-cmp",
  template: `
    <ng-content></ng-content>
  `,
  styles: [`
    my-list {
      display: block;
      border: 1px solid black;
      min-height: 200px;
    }
  `]
})
export class MyCmp {}

@Component({
  selector: 'my-app',
  template: `
      <h2>Angular 2 Styles Issue?</h2>
      <my-cmp>
        <p>Why are style's not being applied to custom component selector "my-list"?</p>
      </my-cmp>
  `,
  directives: [CORE_DIRECTIVES, MyCmp]
})
export class App {}

I would expect the outputted html to look something like this with the styles applying directly to the my-cmp. MyComponent should have a border around it but nothing is applied to it.

<my-app>
  <my-cmp>
        <p>Why are style's not being applied to custom component selector "my-list"?</p>
  </my-list>
</my-cmp>

Here is a plunker demonstrating this example.
http://plnkr.co/edit/w6EYcxLDsLaXXjhdHDh0

[zoechi]

I guess this is what you want:

@Component({
  selector: "my-cmp",
  template: `
    <ng-content></ng-content>
  `,
  styles: [`
    :host {
      display: block;
      border: 1px solid black;
      min-height: 200px;
    }
  `]
})
export class MyCmp {}

I don't know if there is related documentation for Angular but as a start you can find some information at https://www.polymer-project.org/1.0/docs/devguide/styling.html. CSS variables and shady DOM are Polymer only though and therefore this parts of the document doesn't apply to Angular.

[LanceEa]

@zoechi - Thanks for the help. I figured I was missing something here and it probably had to do with my lack of understanding of the Shadow Dom. I was able to make the change as you suggested and it works as I would have expected.

@wardbell @PascalPrecht - I know that the two of you are hard at work on documentation (Much appreciated btw). Is the above something that you guys have seen others challenged with and do you think it might be worth adding something to the documentation? I'm guessing there will be others like me that are new to Shadow Dom and might benefit from some guidance\best practices when starting out with styling Angular 2 Components. Thoughts?

[LanceEa]

Closing since this doesn't seem to be an issue and works as shadow dom is intended to work.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}