René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"ng-content, slot and content elements don't work with nested Angular custom elements","articleBody":"\u003c!--\r\nPLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.\r\n\r\nISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.\r\n--\u003e\r\n\r\n## I'm submitting a...\r\n\u003c!-- Check one of the following options with \"x\" --\u003e\r\n\u003cpre\u003e\u003ccode\u003e\r\n[ ] Regression (a behavior that used to work and stopped working in a new release)\r\n[x] Bug report  \u003c!-- Please search GitHub for a similar issue or PR before submitting --\u003e\r\n[ ] Performance issue\r\n[ ] Feature request\r\n[ ] Documentation issue or request\r\n[ ] Support request =\u003e Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n[ ] Other... Please describe:\r\n\u003c/code\u003e\u003c/pre\u003e\r\n\r\n## Current behavior\r\nCurrently, 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. Here's a more detailed explanation of the behavior:\r\n\r\n For the sake of the example, let's have two Angular components - container and button. Button uses content projection and the template of the container component has nested button inside it. \r\n\r\nTried all kinds of scenarios with nested custom elements - using the content element from v.0 of ShadowDom, the slot from v. 1 and ng-content and placing them in the app.component.html, 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: https://medium.com/@tomsu/building-web-components-with-angular-elements-746cd2a38d5b).\r\n\r\nHere's what I noticed:\r\n\r\n## 'slot' and 'content' elements behave similarly\r\n1. Insertion points work for both the button and the container, when they are placed in the app.component's template.\r\n2. In the angular src/html - the button's content doesn't show up. The content of the button in the container shows up.\r\n3. On the separately hosted html page - same behavior as 2.\r\n\r\nYou can check a demo with slots here: https://stackblitz.com/edit/angular-6jmqbg\r\n\r\n## ng-content\r\n1. Content projection doesn't work when the button and the container are placed in the app.component.\r\n2. On the src/html page - ng-content works for the button, but doesn't work in the container.\r\n3. In the external html - same as 2 \r\n\r\nYou can check a demo project with ng-content here: https://stackblitz.com/edit/angular-uxthfz\r\n\r\n## Expected behavior\r\nShadow dom insertion points or/and content projection should work in nested Angular custom elements\r\n\r\n## Minimal reproduction of the problem with instructions\r\nYou can check a demo with slots here: https://stackblitz.com/edit/angular-6jmqbg\r\nYou can check a demo project with ng-content here: https://stackblitz.com/edit/angular-uxthfz\r\n\r\n## What is the motivation / use case for changing the behavior?\r\n\r\nI'm mostly interested in the last case - in which I'm loading the bundled elements on a a separately hosted html page (external application). It's pretty blocking for us, because most of our components are complex and contain other components in their templates. \r\n\r\nThanks, guys!  :cake:\r\n\r\n## Environment\r\n\r\n\u003cpre\u003e\u003ccode\u003e\r\nAngular version: 6.0.0\r\n\u003c!-- Check whether this is still an issue in the most recent Angular version --\u003e\r\n\r\n\r\n","author":{"url":"https://github.com/JenPeleva","@type":"Person","name":"JenPeleva"},"datePublished":"2018-06-15T12:01:21.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7},"url":"https://github.com/24536/angular/issues/24536"}