this might be why you're seeing a difference between the two examples in the app and directly in the HTML? Not sure in what order the registration happens in your scenario. It seems counter-intuitive as outer uses inner, I would have assumed inner needed to be registered first. If you register outer first then the DOM distribution is fine. Hence the inner ng-content can't select the Project me! div and redistribute it properly.įor what it's worth I've noticed that custom-element registration order seem to have an impact. It's pretty blocking for us, because most of our components are complex and contain other components in their templates. I'm mostly interested in the last case - in which I'm loading the bundled elements on a a separately hosted html page (external application). You can check a demo project with ng-content here: What is the motivation / use case for changing the behavior? Shadow dom insertion points or/and content projection should work in nested Angular custom elements Minimal reproduction of the problem with instructions You can check a demo project with ng-content here: Expected behavior

On the src/html page - ng-content works for the button, but doesn't work in the container.

Content projection doesn't work when the button and the container are placed in the app.component.

You can check a demo with slots here: ng-content

On the separately hosted html page - same behavior as 2.

The content of the button in the container shows up.

In the angular src/html - the button's content doesn't show up.Insertion points work for both the button and the container, when they are placed in the app.component's template.1 and ng-content and placing them in the, in the angular html page in the src folder, as well as on a separately hosted html page, where I'm loading my elements bundles, generated after a production build (following this approach: what I noticed: 'slot' and 'content' elements behave similarly Tried all kinds of scenarios with nested custom elements - using the content element from v.0 of ShadowDom, the slot from v. Button uses content projection and the template of the container component has nested button inside it.

Here's a more detailed explanation of the behavior:įor the sake of the example, let's have two Angular components - container and button. Support request => Please do not submit support request here, instead see Ĭurrently, when you have nested Angular custom elements, and the child element contains ng-content, content or slot elements in its template, content projection/insertion points don't work. Regression (a behavior that used to work and stopped working in a new release)

Ng new slot