How can i build a custom angular component with the width settable in CSS?

Question

This site states, that I can change the width of the side-nav with CSS like this:

md-sidenav {
   width: 200px;
}

This arouses the following question for me: Can I apply the standard CSS properties like width, position, etc... to custom components without to define them in my component?

Example:

my-component {
    width: 500px;
}

I tried it out and it does not work. So I think, that the answer is no, am I right?

To find out how they set width with CSS I have read through the sources on github. But I can't figure out how they did that. The component has no width property. So, how did they make width accessible with CSS?

---

EDIT:

To clarify the question I will give you the following example:

I have programmed the following component:

test.component.html:

<p>test works!</p>

test.component.css:

p {
   border: 2px solid red;
}

test.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

This is my app root, that gets bootstrapped by angular:

app.component.html:

<app-test>

</app-test>

app.component.css

app-test {
  height: 100px;
  width: 200px;
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Test App';
  constructor() { }

}

The _app.component.css_ shows what I want to do. I want to set the size of the _app-test_ component with CSS. I saw this working with the _side-nav_ component of the angular material and I want to understand how they have enabled the _side-nav_ to get its width from the parent components CSS file.

Answer 1

UPDATE After OP's edit:

Change your app.component.css to this:

:host {
  display:block; 
  height: 100px;
  width: 200px;
}

This will apply the styles on the <app-test> selector. Here is the plunker demo.

---

ORIGINAL Answer:

You can override the default styles of Material 2 components by setting encapsulation: ViewEncapsulation.None in the component.

Then you'll have to define the styles in your component.css file.

.mat-sidenav {
    width: 250px;
}

See this plunker demo with user defined width.

---

Update after OP's comments:

Suppose you have a component file, my.component.ts and it has styles in my.component.css, you can define the styles of the component in the css file and apply then on the component selector using :host.

my.component.ts :

@Component({
    selector: 'my-comp', 
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent{
}

my.component.css :

:host {
    width: 500px;
    background-color: red;
}

my.component.html:

<h2>Some Heading in the Template </h2>