What relation is there between Angular's <ng-content> and ShadowDOM

Question

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.

Answer 1

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.