Angular 7 -what is mechanism behind creating components with isolated scope with styles in angular?

Question

In angular 7 - does core library using shadow dom element to handle isolated scope. what is scene behind the creating components in angular 7 and how isolated scope its working ?

can anyone please help me to understand this ?

Answer 1

As per the document of angular, DOM encapsulation is used for component-specific style inject.

This seems to be the key feature like creating a pseudo element and attaching the styles in the name of it.

MDN-Docs

Angular-Docs

Update

Found this in angular's official repo: style_compiler

need to study deeply though!

Answer 2

In Angular default view Encapsulation technique is emulated , which is provided by encapsualation: viewEncapsulation.Emulated , you don't have to explicitly define this. This emulate Native scoping of styles by adding an attribute containing surrogate id to the Host Element.

If you are using encapsualation: viewEncapsulation.None , this doesn't provide any template or style encapsulation, whatever the styles you define, will be applied globally.

If you are using encapsualation: viewEncapsulation.Native this will use the native Shadow DOM technique, but all the modern browsers does not support this.