docs(component-styles): new guide chapter - ward's tweaks

wardbell · wardbell · commit e07e2f81b68c · 2016-04-05T17:42:14.000-07:00
diff --git a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts
@@ -15,5 +15,5 @@ import {QuestSummaryComponent} from './quest-summary.component';
   directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]
 })
 export class HeroAppMainComponent {
-  @Input() hero:Hero;
+  @Input() hero: Hero;
 }
diff --git a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts
@@ -14,8 +14,8 @@ import {HeroAppMainComponent} from './hero-app-main.component';
   `],
   directives: [HeroAppMainComponent]
 })
-export class HeroAppComponent {
 // #enddocregion
+export class HeroAppComponent {
   hero = new Hero(
     'Human Torch',
     ['Mister Fantastic', 'Invisible Woman', 'Thing']
diff --git a/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts b/public/docs/_examples/component-styles/ts/app/hero-controls.component.ts
@@ -15,10 +15,10 @@ import {Hero} from './hero';
     <button (click)="activate()">Activate</button>
   `
 })
-export class HeroControlsComponent {
 // #enddocregion inlinestyles
+export class HeroControlsComponent {
 
-  @Input() hero:Hero;
+  @Input() hero: Hero;
 
   activate() {
     this.hero.active = true;
diff --git a/public/docs/_examples/component-styles/ts/app/hero-team.component.ts b/public/docs/_examples/component-styles/ts/app/hero-team.component.ts
@@ -11,11 +11,9 @@ import {Hero} from './hero';
       <li *ngFor="#member of hero.team">
         {{member}}
       </li>
-    </ul>
-  `
+    </ul>`
 })
-export class HeroTeamComponent {
 // #enddocregion stylelink
-
-  @Input() hero:Hero;
+export class HeroTeamComponent {
+  @Input() hero: Hero;
 }
diff --git a/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts b/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts
@@ -5,7 +5,7 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 // Let TypeScript know about the special SystemJS __moduleName variable
 declare var __moduleName: string;
 // #enddocregion
-// moduleName doesn't work on Plunkr, set it explicitly
+// moduleName is not set in many module loaders; set it explicitly
 if (!__moduleName) {
   __moduleName = `http://${location.host}/${location.pathname}/app/`;
 }
@@ -16,8 +16,13 @@ if (!__moduleName) {
   selector: 'quest-summary',
   template: 'No quests ongoing',
   styleUrls: ['quest-summary.component.css'],
-})
-export class QuestSummaryComponent {
+  encapsulation: ViewEncapsulation.Emulated // default
+/*
+  // #docregion encapsulation.native
+  encapsulation: ViewEncapsulation.Native // warning: little browser support at this time
+  // #enddocregion encapsulation.native
+*/
 
-}
+})
+export class QuestSummaryComponent { }
 // #enddocregion
diff --git a/public/docs/_examples/component-styles/ts/app/quest-summary.native.component.css b/public/docs/_examples/component-styles/ts/app/quest-summary.native.component.css
diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json
@@ -62,6 +62,11 @@
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+  
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",
diff --git a/public/docs/dart/latest/guide/component-styles.jade b/public/docs/dart/latest/guide/component-styles.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json
@@ -62,6 +62,11 @@
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+  
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",
diff --git a/public/docs/js/latest/guide/component-styles.jade b/public/docs/js/latest/guide/component-styles.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade
@@ -16,8 +16,8 @@ include ../_util-fns
   * [Using Component Styles](#using-component-styles)
   * [Loading Styles into Components](#loading-styles-into-components)
   * [Controlling View Encapsulation: Emulated, Native, and None](#controlling-view-encapsulation-native-emulated-and-none)
-  * [Appendix 1: Inspecting the generated runtime component styles](#appendix-1-inspecting-the-css-generated-in-emulated-view-encapsulation)
-  * [Appendix 2: Loading Styles with Relative URLs](#appendix-2-loading-styles-with-relative-urls)
+  * [Appendix 1: Inspecting the generated runtime component styles](#inspect-generated-css)
+  * [Appendix 2: Loading Styles with Relative URLs](#load-styles-with-relative-urls)
   
   **[Run the live code](/resources/live-examples/component-styles/ts/plnkr.html)
     shown in this chapter.**
@@ -191,33 +191,33 @@ include ../_util-fns
   As described above, the CSS styles of a component are *encapsulated* into its own view and do
   not affect the rest of the application.
   
-  We can actually control how this encapsulation happens, and we can do that on a component per
-  component basis. This is done by setting the *view encapsulation mode* of each component. There
-  are three modes we can choose from:
+  We can actually control how this encapsulation happens, and we can do that on a *per
+  component* basis by setting the *view encapsulation mode* in the component metadata. There
+  are three modes to choose from:
   
   * `Native` view encapsulation uses the browser's native [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
     implementation to attach a Shadow DOM to the component's host element, and then puts the component
     view inside that Shadow DOM. The component's styles are included within the Shadow DOM.
+    
   * `Emulated` view encapsulation (**this is the default**) emulates the behavior of Shadow DOM by preprocessing
     the CSS code in a way that scopes it to the component's view. See
-    [Appendix 1](#appendix-1-inspecting-the-css-generated-in-emulated-view-encapsulation) for details.
+    [Appendix 1](#inspect-generated-css) for details.
+    
   * `None` means that no view encapsulation is applied to the component's view. All CSS styles
     are applied globally, and the scoping rules discussed above do not apply. This is essentially the
     same as adding the component's styles as a global stylesheet to the page.
     
-  `Native` view encapsulation will only work on [browsers that have native support
-  for Shadow DOM](http://caniuse.com/#feat=shadowdom). The support is still limited,
-  which is why `Emulated` view encapsulation is the default mode and recommended
-  in most cases.
-    
   We can set the view encapsulation of a component by using the `encapsulation`
   attribute in the component metadata:
   
-+makeExample('component-styles/ts/app/quest-summary.native.component.ts', 'encapsulation')
-
++makeExample('component-styles/ts/app/quest-summary.component.ts', 'encapsulation.native')
 :marked
-  
+  `Native` view encapsulation only works on [browsers that have native support
+  for Shadow DOM](http://caniuse.com/#feat=shadowdom). The support is still limited,
+  which is why `Emulated` view encapsulation is the default mode and recommended
+  in most cases.
 
+a(id="#inspect-generated-css")
 .l-main-section
 :marked
   ## Appendix 1: Inspecting The CSS Generated in Emulated View Encapsulation
@@ -266,6 +266,7 @@ code-example(format="").
   secret sauce that enables the scoping rules described in this guide. At least until
   Shadow DOM becomes more widely supported natively.
   
+a(id="load-styles-with-relative-urls")
 .l-main-section
 :marked
   ## Appendix 2: Loading Styles with Relative URLs

Original file line number	Diff line number	Diff line change
`@@ -15,5 +15,5 @@ import {QuestSummaryComponent} from './quest-summary.component';`
`15`	`15`	`directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]`
`16`	`16`	`})`
`17`	`17`	`export class HeroAppMainComponent {`
`18`		`- @Input() hero:Hero;`
	`18`	`+ @Input() hero: Hero;`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+!= partial("../../../_includes/_ts-temp")`