5 lines
5.4 KiB
JSON
5 lines
5.4 KiB
JSON
|
{
|
||
|
|
"id": "guide/view-encapsulation",
|
||
|
|
"title": "View encapsulation",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/view-encapsulation.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"view-encapsulation\">View encapsulation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/view-encapsulation#view-encapsulation\"><i class=\"material-icons\">link</i></a></h1>\n<p>In Angular, component CSS styles are encapsulated into the component's view and don't\naffect the rest of the application.</p>\n<p>To control how this encapsulation happens on a <em>per\ncomponent</em> basis, you can set the <em>view encapsulation mode</em> in the component metadata.\nChoose from the following modes:</p>\n<ul>\n<li>\n<p><code>ShadowDom</code> view encapsulation uses the browser's native shadow DOM implementation (see\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM\">Shadow DOM</a>\non the <a href=\"https://developer.mozilla.org\">MDN</a> site)\nto attach a shadow DOM to the component's host element, and then puts the component\nview inside that shadow DOM. The component's styles are included within the shadow DOM.</p>\n</li>\n<li>\n<p><code>Emulated</code> view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing\n(and renaming) the CSS code to effectively scope the CSS to the component's view.\nFor details, see <a href=\"guide/view-encapsulation#inspect-generated-css\">Inspecting generated CSS</a> below.</p>\n</li>\n<li>\n<p><code>None</code> means that Angular does no view encapsulation.\nAngular adds the CSS to the global styles.\nThe scoping rules, isolations, and protections discussed earlier don't apply.\nThis is essentially the same as pasting the component's styles into the HTML.</p>\n</li>\n</ul>\n<p>To set the component's encapsulation mode, use the <code>encapsulation</code> property in the component metadata:</p>\n<code-example path=\"component-styles/src/app/quest-summary.component.ts\" region=\"encapsulation.shadow\" header=\"src/app/quest-summary.component.ts\">\n// warning: few browsers support shadow DOM encapsulation at this time\nencapsulation: <a href=\"api/core/ViewEncapsulation#ShadowDom\" class=\"code-anchor\">ViewEncapsulation.ShadowDom</a>\n\n</code-example>\n<p><code>ShadowDom</code> view encapsulation only works on browsers that have native support\nfor shadow DOM (see <a href=\"https://caniuse.com/shadowdomv1\">Shadow DOM v1</a> on the\n<a href=\"https://caniuse.com/\">Can I use</a> site). The support is still limited,\nwhich is why <code>Emulated</code> view encapsulation is the default mode and recommended\nin most cases.</p>\n<a id=\"inspect-generated-css\"></a>\n<h2 id=\"inspecting-generated-css\">Inspecting generated CSS<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/view-encapsulation#inspecting-generated-css\"><i class=\"material-icons\">link</i></a></h2>\n<p>When using emulated view encapsulation, Angular preprocesses\nall component styles so that they approximate the standard shadow CSS scoping rules.</p>\n<p>In the DOM of a running Angular application with emulated view\nencapsulation enabled, each DOM element has some extra attributes\nattached to it:</p>\n<code-example format=\"\">\n <hero-details _nghost-pmm-5>\n <h2 _ngcontent-pmm-5>Mister Fantastic</h2>\n <hero-team _ngcontent-pmm-5 _nghost-pmm-6>\n <h3 _ngcontent-pmm-6>Team</h3>\n </hero-team>\n </hero-detail>\n\n</code-example>\n<p>There are two kinds of generated attributes:</p>\n<ul>\n<li>An element that would be a shadow DOM host in native encapsulation has a\ngenerated <code>_nghost</code> attribute. This is typically the case for component host elements.</li>\n<li>An element within a component's view has a <code>_ngcontent</code> attribute\nthat identifies to
|
||
|
|
}
|