@@ -113,12 +116,12 @@ This component colors its template elements green.
-Similar to `ViewEncapsulation.None`, Angular adds the styles for this component to the `` of the document, but with "scoped" styles.
+Comparable to `ViewEncapsulation.None`, Angular adds the styles for this component to the `` of the document, but with "scoped" styles.
-Therefore, only the elements directly within this component's template will match its styles.
-Since the "scoped" styles from the `EmulatedEncapsulationComponent` are very specific, they override the global styles from the `NoEncapsulationComponent`.
+Only the elements directly within this component's template are going to match its styles.
+Since the "scoped" styles from the `EmulatedEncapsulationComponent` are specific, they override the global styles from the `NoEncapsulationComponent`.
-In this example, the `EmulatedEncapsulationComponent` contains a `NoEncapsulationComponent`, but `NoEncapsulationComponent` is still styled as expected since the `EmulatedEncapsulationComponent`'s "scoped" styles do not match elements in its template.
+In this example, the `EmulatedEncapsulationComponent` contains a `NoEncapsulationComponent`, but `NoEncapsulationComponent` is still styled as expected since the `EmulatedEncapsulationComponent` 's "scoped" styles do not match elements in its template.
@@ -138,7 +141,7 @@ Angular adds styles for this component only to the shadow DOM host, so they are
**NOTE**:
-Angular also adds the global styles from the `NoEncapsulationComponent` and `EmulatedEncapsulationComponent` to the shadow DOM host, so those styles are still available to the elements in the template of this component.
+Angular also adds the global styles from the `NoEncapsulationComponent` and `EmulatedEncapsulationComponent` to the shadow DOM host. Those styles are still available to the elements in the template of this component.
@@ -148,7 +151,7 @@ The styles added by the `ShadowDomEncapsulationComponent` component are availabl
The `EmulatedEncapsulationComponent` has specific "scoped" styles, so the styling of this component's template is unaffected.
-But since styles from `ShadowDomEncapsulationComponent` are added to the shadow host after the global styles, the `h2` style overrides the style from the `NoEncapsulationComponent`.
+Since styles from `ShadowDomEncapsulationComponent` are added to the shadow host after the global styles, the `h2` style overrides the style from the `NoEncapsulationComponent`.
The result is that the `
` element in the `NoEncapsulationComponent` is colored blue rather than red, which may not be what the component's author intended.