You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: adev/src/content/guide/components/styling.md
+8-9Lines changed: 8 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -78,15 +78,14 @@ exclusively for backwards compatibility.
78
78
When a selector contains `::ng-deep`, Angular stops applying view-encapsulation boundaries after that point in the selector. Any part of the selector that follows `::ng-deep` can match elements outside the component’s template.
79
79
80
80
For example:
81
-
- a CSS rule whose selector is `p a` will match `<a>` elements inside the component's template, which are also
82
-
descendants of a `<p>` element that's itself also inside the component's template. That's Angular's default behavior.
83
-
-`::ng-deep p a` will match `<a>` elements anywhere in the page, descendants of a `<p>` element anywhere in the page.
84
-
That effectively makes it a global style.
85
-
-`p ::ng-deep a` will match `<a>` elements anywhere in the page, but only those that are descendents
86
-
of a `<p>` element inside the component's template.
87
-
So, effectively, the `<a>` can only be in the component's template, or among the component's children.
88
-
-`:host ::ng-deep p a` will match `<a>` elements descendants of `<p>` elements, both being descendants of the component.
89
-
That means, which are both either in the component's template, or among its children.
81
+
- a CSS rule selector is like `p a`, using the emulated encapsulation, will match `<a>` that are descendants of a `<p>` element,
82
+
both being within the component's own template.
83
+
- A selector like `::ng-deep p a` will match `<a>` elements anywhere in the application, descendants of a `<p>` element anywhere in the application.
84
+
That effectively makes it behave like a global style.
85
+
- In `p ::ng-deep a`, Arngular requires the `<p>` element to come from the component's own template, but the `<a>` element may be anywhere in the application.
86
+
So, in effect, the `<a>` element may be in the component's template, or in any of its projected or child content.
87
+
- With `:host ::ng-deep p a`, both the `<a>` and `<p>` elements must be decendants of the component's host element.
88
+
They can come from the component's template or in the views of its child components, but not elsewhere in the app.
0 commit comments