Using slot API with Angular Elements throws an error

[alevyKorio]

🐞 bug report

Affected Package

angular/elements

Description

I am making a container component in Angular 9 to be turned into a web component. The container component is first turned into a Web Component once that is done ANY children can be passed into it and manipulate it. I have code that wraps the <ng-content> but once the turned into a web component the children are not wrapped.

🔬 Minimal Reproduction

First clone https://github.com/alevyKorio/SmartContainer.git

then run npm install

then npm run build:ngelement

go into elements folder and the container has become a web component SmartContainer.js copy that file

clone https://github.com/alevyKorio/SmartContainerShell.git

paste file into root directory of SmartContainerShell folder

run npm install run npm run serve

🔥 Exception or Error

As you can see in this image

The divs are siblings to the app-smart-container instead of children

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.5
Node: 10.16.2
OS: win32 x64

Angular: 9.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.5
@angular-devkit/build-angular     0.900.5
@angular-devkit/build-optimizer   0.900.5
@angular-devkit/build-webpack     0.900.5
@angular-devkit/core              9.0.5
@angular-devkit/schematics        9.0.5
@ngtools/webpack                  9.0.5
@schematics/angular               9.0.5
@schematics/update                0.900.5
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant? Once changes are made to SmartContainer run then npm run build:ngelement go into the elements folder and copy the new SmartContainer.js to the shell and restart the shell

[sod]

Could you try <slot></slot> instead of ng-content for content projection?

[alevyKorio]

Could you try <slot></slot> instead of ng-content for content projection?

I have replaced ng-content with <slot></slot> and this is what the dom becomes:

The changes in code are as follows:

SmartContainer component:

<div style="width: 100%"  id="smart-container-id" class="container">
    <slot (slotchange)="slotChange()"></slot>
</div>

the slotChange() method is doing exactly what ngAfterViewInit() did instead

AppComponent:

<app-smart-container id="app-smart-container">
  <slot></slot>
</app-smart-container>

This is the outcome:

With this console error:

The div with id = smart-container-id can no longer be found by the document.

Sorry I am not familiar with slot, but it seems that it is referencing the Elements but now they are children of not the <div id="smart-container-id"> which is an issue.

[gkalpak]

I just wanted to confirm this is still an issue with v10: StackBlitz demo

It seems that the element's children have been removed before trying to detect the element's "projectable" nodes, so nothing gets projected. We still need to look into why this is happening.

[iamjaredsimpson]

Are there any updates on this?