docs(component-styles): add chapter about styling components

[teropa]

No description provided.

[zoechi]

Great!

From what I have seen >>> is also supported (same as /deep/). Should it be mentioned?
There is also '::shadowwhich is also not mentioned (to just pierce one "shadow" boundary in contrary to all with/deep/`).

[teropa]

@zoechi Thanks!

From what I have seen >>> is also supported (same as /deep/). Should it be mentioned?

That's a good question. I decided at this point not to mention it since it does the exact same thing as /deep/, but isn't supported by Chrome so it won't work with ViewEncapsulation.Native.

There is also '::shadowwhich is also not mentioned (to just pierce one "shadow" boundary in contrary to all with/deep/`).

Judging by angular/angular#6511 and angular/angular#7562 and the source code, I don't think the ::shadow selector actually works in emulated view encapsulation. It's just replaced with whitespace, which doesn't have the advertised effect. We should definitely mention it if it becomes supported.

[zoechi]

Judging by angular/angular#6511 and angular/angular#7562 and the source code, I don't think the ::shadow selector actually works in emulated view encapsulation.

Seems you're right https://github.com/angular/angular/blob/cb38d72ff4231c098c69fb3fa6dd3cbc634f0cbe/modules/angular2/src/compiler/shadow_css.ts#L317

That's a good question. I decided at this point not to mention it since it does the exact same thing as /deep/, but isn't supported by Chrome so it won't work with ViewEncapsulation.Native.

/deep/ is also deprecated in Chrome and planned to be removed since quite some time (and generates a warning in the console - or was this removed again, I haven't seen the warning since a while). These selectors (/deep/, >>>, ::shadow) are currently mostly Angular2-only and I would mention that they shouldn't be used with ViewEncapsulation.Native.

[wardbell]

I updated a few things and polished here and there. I clarified the moduleId in particular.

FWIW, the problem wasn't with plunker but the fact that we were serving an old version of SystemJS that didn't support __moduleName. I'm told by the Angular team that that will be fixed soon (how soon I don't know). Leaving your shim in the code as that might be handy elsewhere some day.

I know you use the word "attribute" when referring to the keys in the component metadata object. That's technically correct. Nonetheless, I switched to the more colloquial (albeit inaccurate) word "property". I feared some readers would be confused by "attribute",

I did not try to resolve the matter of whether to remove /deep/ from the doc. I'm leaving that to you.

I'd like to merge this tomorrow a.m. so that it makes the beta.14 publication. Please let make any necessary corrections and tell me when I can let it go.

Please note that I force-pushed so you may have to re-pull the branch.

[teropa]

@zoechi Thanks for the clarification. I have added a mention of this, as well as a passing mention of >>>.

@wardbell Thanks! Sorry to notice I made a superstitious assumption about Plunker somehow being the problem. I pushed some minor changes based on @zoechi's input and fixed a couple of typos. This is now ready to go from my perspective.