View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa.
Angular provides three encapsulation strategies:
1.None 2.Emulated 3.Native
Method 1.The styles can be wrapped in a style tag and placed before the templates:
Method 2.The style can be written as normal inline styles in the template tags:
The expected behavior in various view encapsulation techniques are:
•None: Styles defined in a component are visible to all components of the application
For method 1, the style is wrapped in a style tag and pushed to the head. It is appended right after the component inline and external styles. For method 2, the style just remains in the tag.
•Emulated: Styles used in other HTML spread to the component
For method 1, the style is wrapped in style tag, pushed to head and uniquely identified so it can be matched with its component's template just like component inline style. For method 2, the style still remains in the tag.
•Native: Styles used in other HTML doesn’t spread to the component
Behaves as expected of web components.
Top comments (0)