How does angular2 distinguishes between Light DOM or Shadow DOM inside components view

Question

I'm reading this article on host and visibility and it states the following about viewProviders metadata property of Component decorator:

With viewProviders we can tell the DI system very specifically, which providers are available to which child injectors (Light DOM or Shadow DOM).

I'm wondering how angular2 distinguishes between Light DOM or Shadow DOM inside components template?

This article also mentiones <ng-content> tag:

If we configure Angular accordingly, this DOM tree can be Shadow DOM. That's also why we have an tag there. It's Angular's implementation of content insertion points, which is another Shadow DOM feature.

So anythying that is put inside ng-content is considered Shadow DOM ?

Answer 1

If you have a components template like

@Component({
  selector: 'my-comp',
  template: `
    <div>shadow DOM<div>
    <ng-content></ng-content>
    <div>shadow DOM<div>`, 
    ...  

and use it like

<my-comp>
  <div>light DOM</div>
</my-comp>

then it will result in

<my-comp>
  <div>shadow DOM</div>
  <div>light DOM</div>
  <div>shadow DOM<div>
</my-comp>

Therefore, the light DOM is not really the content of a components template, it is just child content projected at a predefined location within the shadow DOM.

If the default view encapsulation Emulate is used, shadow DOM will only be emulated. Only with Native it will become a real shadow DOM on browsers that support it.