By default, as we have seen, our component won't encapsulate its structure and styling. This means that CSS classes from outside of the component can override and affect the embedded CSS styles that we defined, and the HTML structure of the component is accessible as well.
Angular will generate a unique property for our selector
to protect our styling, but this can be overridden with a CSS !important
statement.
To change this, we need to define an encapsulation mode. Angular 2 provides us three options to choose from:
Emulated (the default): Angular will add a special attribute to the class
selector
to avoid affecting other styles outside of the components.Native: This is the native encapsulation mechanism of the renderer that will be applied. In our case, it's the browser. Angular will create a shadow DOM for this component, which means that external CSS can't affect our component.
To define encapsulation options, we need to import...