82 lines
3.4 KiB
Markdown
82 lines
3.4 KiB
Markdown
# View encapsulation
|
|
|
|
In Angular, component CSS styles are encapsulated into the component's view and don't
|
|
affect the rest of the application.
|
|
|
|
To control how this encapsulation happens on a *per
|
|
component* basis, you can set the *view encapsulation mode* in the component metadata.
|
|
Choose from the following modes:
|
|
|
|
* `ShadowDom` view encapsulation uses the browser's native shadow DOM implementation (see
|
|
[Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
|
|
on the [MDN](https://developer.mozilla.org) site)
|
|
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 (the default) emulates the behavior of shadow DOM by preprocessing
|
|
(and renaming) the CSS code to effectively scope the CSS to the component's view.
|
|
For details, see [Inspecting generated CSS](guide/view-encapsulation#inspect-generated-css) below.
|
|
|
|
* `None` means that Angular does no view encapsulation.
|
|
Angular adds the CSS to the global styles.
|
|
The scoping rules, isolations, and protections discussed earlier don't apply.
|
|
This is essentially the same as pasting the component's styles into the HTML.
|
|
|
|
To set the component's encapsulation mode, use the `encapsulation` property in the component metadata:
|
|
|
|
<code-example path="component-styles/src/app/quest-summary.component.ts" region="encapsulation.shadow" header="src/app/quest-summary.component.ts"></code-example>
|
|
|
|
`ShadowDom` view encapsulation only works on browsers that have native support
|
|
for shadow DOM (see [Shadow DOM v1](https://caniuse.com/shadowdomv1) on the
|
|
[Can I use](https://caniuse.com/) site). The support is still limited,
|
|
which is why `Emulated` view encapsulation is the default mode and recommended
|
|
in most cases.
|
|
|
|
{@a inspect-generated-css}
|
|
|
|
## Inspecting generated CSS
|
|
|
|
When using emulated view encapsulation, Angular preprocesses
|
|
all component styles so that they approximate the standard shadow CSS scoping rules.
|
|
|
|
In the DOM of a running Angular application with emulated view
|
|
encapsulation enabled, each DOM element has some extra attributes
|
|
attached to it:
|
|
|
|
<code-example format="">
|
|
<hero-details _nghost-pmm-5>
|
|
<h2 _ngcontent-pmm-5>Mister Fantastic</h2>
|
|
<hero-team _ngcontent-pmm-5 _nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Team</h3>
|
|
</hero-team>
|
|
</hero-detail>
|
|
|
|
</code-example>
|
|
|
|
There are two kinds of generated attributes:
|
|
|
|
* An element that would be a shadow DOM host in native encapsulation has a
|
|
generated `_nghost` attribute. This is typically the case for component host elements.
|
|
* An element within a component's view has a `_ngcontent` attribute
|
|
that identifies to which host's emulated shadow DOM this element belongs.
|
|
|
|
The exact values of these attributes aren't important. They are automatically
|
|
generated and you should never refer to them in application code. But they are targeted
|
|
by the generated component styles, which are in the `<head>` section of the DOM:
|
|
|
|
<code-example format="">
|
|
[_nghost-pmm-5] {
|
|
display: block;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
h3[_ngcontent-pmm-6] {
|
|
background-color: white;
|
|
border: 1px solid #777;
|
|
}
|
|
</code-example>
|
|
|
|
These styles are post-processed so that each selector is augmented
|
|
with `_nghost` or `_ngcontent` attribute selectors.
|
|
These extra selectors enable the scoping rules described in this page.
|