5

While comparing Angular Content Projection using <ng-content> with HTML's ShadowDOM (ShadowDOM Visualizer), I found a subtle difference.

In the above mentioned link page, when I remove select attribute of <content> in <header> tag, then all other contents are attached to header component.

While in Angular, only elements having no selector are collected and appended to the wildcard <ng-content></ng-content>

I got technically nostalgic while viewing the above link. So, this question came in my mind.

Note: I am redirected to that link from Google Developer's Web Fundamentals on Shadow DOM.

halfer
  • 19,824
  • 17
  • 99
  • 186
Gourav Pokharkar
  • 1,568
  • 1
  • 11
  • 33

1 Answers1

4

Thank you for your question!

I think there is no relation between Angular and ShadowDOM by default. If you use ViewEncapsulation.Emulated which is set by default angular will emulate the ShadowDOM. You can enable it with ViewEncapsulation.Native, but only in browsers that support this feature.

You could check this example with DevTools. You will find these weird _ngcontent-pmu-c51 attributes. It's the way how angular emulates the ShadowDOM.

I hope I found an answer to your question. I'm looking forward to your feedback.

You can find more info here:

Code documentation

Good blog post about the view encapsulation

The similar question

Update:

We don't have any relation between the Angular <ng-content> and ShadowDOM. Maybe, they have some similar concepts, but it's a maximum.

Andrii Zelenskyi
  • 316
  • 1
  • 4
  • Sorry. This is not answer to my question. Please review link in my question and relate it with behaviour. – Gourav Pokharkar Jul 12 '19 at 10:51
  • Sorry! I didn't understand your question correctly. Just to clarify. Do you want to know what is the "scope" of the styles of the elements that would be attached to the `` element and in the what way they are connected with the shadow DOM? – Andrii Zelenskyi Jul 12 '19 at 11:58
  • Not related with the styles but with actual element projection concept. Please review how example mentioned in question works by doing some tweaks with it. – Gourav Pokharkar Jul 13 '19 at 05:17