Don't ghost your
host-context()!
Hey!
Principal Engineer
@ Dell SecureWorks
Ankita sood
-
ViewEncapsulation.None
-
ViewEncapsulation.ShadowDom
-
ViewEncapsulation.Emulated
Encapsulation
none
The styles of components with ViewEncapsulation.None are added to the <head> of the document, making them available throughout the application, so are completely global and affect any matching elements within the document.
shadow dom
The styles of components with ViewEncapsulation.ShadowDom are only added to the shadow DOM host, ensuring that they only affect elements within their respective components' views.
Emulated
The styles of components with ViewEncapsulation.Emulated are added to the <head> of the document, making them available throughout the application, but their selectors only affect elements within their respective components' templates.
host selector
Target: Component block itself.
host-context() selector
Target: Contents inside component block, based on ancestor provided.
Live Demo
Don't ghost your host-context()!
By Ankita Sood
Don't ghost your host-context()!
Angular host-context()
