Elements created with map added outside target slot #897

davidrleonard · 2018-07-02T23:06:17Z

Stencil version:

@stencil/core@0.9.1

I'm submitting a:

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

Use map inside of a render() function to iterate over state data, create elements, and pass the elements into a slot
When the component first mounts the resulting elements are correctly rendered in the slot, and have a parentElement of the slot's owner
Add something to the state data so render runs again and the map runs again
The new elements are not rendered into their slot, and have a parentElement of null. They new elements are weirdly appended to the end of the slot owner's shadow root, and do not appear in the slot owner's children list. The new elements appear visually after all of their slot owner's shadow root content. The elements that were created before stay in the same place and work as expected.

Expected behavior:

1-3: Same
4. The new elements are rendered into their slot just like the original elements. The new elements have a parentElement of the slot owner and appear visually in the correct place.

Steps to reproduce:

Create a stencil-component-starter project with the following files:

src/components/
├── my-app/
│   └── my-app.tsx
├── friends-list/
│   └── friends-list.tsx
└── index.html

Add source code for index.html:

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>
  <script src="/build/mycomponent.js"></script>

</head>
<body>
  <my-app></my-app>
</body>
</html>

Add source code for my-app.tsx:

import { Component, State } from '@stencil/core';

@Component({
  tag: 'my-app',
  shadow: true
})
export class MyApp {
  @State() friends: string[] = ['Maria', 'Jasmine', 'Juan'];

  addFriend = () => {
    this.friends = [
      ...this.friends,
      'Alexander'
    ];
  }

  render() {
    return (
      <div>
        <button onClick={this.addFriend}>Add a friend</button>
        <friends-list>
          {this.friends.map(friend => {
            return <p>{friend}</p>;
          })}
        </friends-list>
      </div>
    );
  }
}

Add source code for friends-list.tsx:

import { Component } from '@stencil/core';

@Component({
  tag: 'friends-list',
  shadow: true
})
export class FriendsList {
  render() {
    return (
      <div>
        <h1>These are my friends:</h1>
        <div style={{ display: 'block', border: '1px solid red' }}>
          <slot></slot>
        </div>
        <p>That's it....</p>
      </div>
    );
  }
}

Run the dev server: npm run dev and open the demo in Chrome
Click the "Add Friend" button
The new friend "Alexander" appears outside of the red-bordered slot area.

Inspect element and check the "Alexander" p tag's parentElement. It is null.

Related code:
See above.

Other information:

OS: macOS Sierra 10.13.2
Browser: Chrome Stable Version 66.0.3359.181 (Official Build) (64-bit)

The text was updated successfully, but these errors were encountered:

davidrleonard · 2018-07-02T23:08:32Z

Potentially related bugs that are closed: #810, #757, #727

Test suite added in 2a1553f that I think should be failing right now based on my repro code above, but seems to be passing in the last CI build (0 failures for karma tests).

sebastien-yoobic · 2018-07-16T09:18:41Z

I have the same issue. When I try to replace shadow: true by scoped: true the problem is still here.

kensodemann · 2018-07-17T00:16:47Z

@davidrleonard - I can use the sample code provided above to duplicate this issue when using Stencil 0.9.1 and 0.9.7, but not when using Stencil 0.10.0 (using the latest starter) or 0.10.7 (after upgrading the version used by the starter) so this appears to have been fixed.

Please try your sample app using the latest starter. If this is still an issue for you, please provide a simple application that reproduces the issue via GitHub and I will re-open it.

kensodemann · 2018-07-17T09:51:14Z

Reopenning as this can be duplicated by using scoped: true rather than shadow: true in the container component (friends-list in the code @davidrleonard provided).

Example: https://github.com/kensodemann/test-slot
Another Example: https://github.com/sebastien-yoobic/scoped-map-slot-update

ionitron-bot · 2018-08-25T03:28:09Z

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

kensodemann · 2018-08-27T13:44:21Z

reopening as this is still an issue with a community member I am working with.

kensodemann · 2018-10-01T13:38:11Z

A community member I am working with was asking about this so I freshened up my sample project (https://github.com/kensodemann/test-slot) a bit as follows:

Updated my sample project to Stencil 0.13.2 and removed all <p> tags.

The issue occurs with the following component configuration in friends-list.tsx:

@Component({
  tag: 'friends-list',
  // shadow: true
  scoped: true
})

Swapping from scoped: true to shadow: true causes the issue to go away. However, it is my understanding that even though scoped: true is likely going to be on the chopping block at some point it needs to work properly because the same strategy is used in certain polyfills (or at least that is my understanding from prior verbal conversations).

kensodemann · 2018-10-05T16:07:25Z

Duplicated this without the use of scoped: true:

https://github.com/kensodemann/out-of-slot-rendering

Code is based on some real-life code from the community member I am working on but greatly simplified and without any of their custom code (just using our PWA toolkit with @ionic/core components).

kensodemann · 2018-10-31T12:31:03Z

My repro repo is using ion-slides, but I believe I have a way to duplicate this without any Ionic components. This seems to occur because ion-slides is not using shadow DOM (or scoped). I will try to create a unit test to recreate.

kensodemann · 2018-10-31T17:08:06Z

@adamdbradley - PR #1197 contains a karma test that can be used to duplicate this issue.

kensodemann · 2018-11-01T13:26:53Z

Also simplified the sample app: https://github.com/kensodemann/out-of-slot-rendering and provided three conditions in the README.md file with different behaviors given different uses of shadow DOM and light DOM.

davidrleonard · 2018-11-02T17:50:04Z

Not trying to pollute this thread with unrelated talk, but btw, thanks for spending the time to hunt this down. Look forward to seeing a patch land to address it. 🚀

seifsay3d-zz · 2019-07-31T13:22:25Z

any updates on this one? I am still facing this with 1.0.2

petermikitsh · 2019-11-10T04:55:41Z

@seifsay3d I have reproduced this issue in version 1.7.5.

See #1997 (Demo repo: https://github.com/petermikitsh/stencil-vdom-bug)

seifsay3d-zz · 2019-11-10T16:02:53Z

For anyone who is struggling with this problem, one possible 'hack' is to provide the content as props for the data that will change, and use slots only for static data :/

bschlenk · 2019-11-11T22:44:56Z

I'm close to a workaround here...

If I include the webcomponents polyfills (<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>) on the page, then stencil doesn't use the fallback, and the component insides only show the light dom.

The issue now is that it seems like whatever stencil does to detect if it needs to use scoped styles is tied together with what it uses to determine if it needs to do the slots fallback, so now styles are broken. This seems to be because older browsers don't understand the :host css selector. Replacing :host with my component's tag name makes this work in older browsers, but breaks it in newer ones.

If there was a way to configure shadow: true and scoped: true at the same time on a component, then I think I'd have a proper workaround.

NKBelousov · 2019-12-25T21:18:26Z

Just encountered this problem, what should I do about it? I'm using custom element for table component and misplaced rows are really problematic

NKBelousov · 2019-12-25T21:57:19Z

btw I'm using:

├─┬ @stencil/core@1.8.1
│ └── typescript@3.7.2

Gbuomprisco · 2020-01-20T12:43:17Z

I'm also getting the same issue using @stencil/core v1.9.0-11

ionitron-bot bot added the triage label Jul 2, 2018

kensodemann closed this as completed Jul 17, 2018

kensodemann reopened this Jul 17, 2018

adamdbradley added bug and removed triage labels Jul 26, 2018

ionitron-bot bot added the ionitron: stale issue This issue has not seen any activity for a long period of time label Aug 25, 2018

ionitron-bot bot closed this as completed Aug 25, 2018

ionitron-bot bot locked and limited conversation to collaborators Aug 25, 2018

kensodemann reopened this Aug 27, 2018

ionic-team unlocked this conversation Sep 10, 2018

jthoms1 removed the ionitron: stale issue This issue has not seen any activity for a long period of time label Sep 10, 2018

jthoms1 added this to Backlog 🤖 in Stencil via automation Sep 10, 2018

kensodemann mentioned this issue Oct 31, 2018

test(slot): test adding to a non-shadow list inside of a shadow DOM component. #1197

Merged

scottopherson mentioned this issue Dec 6, 2018

Whitespace affects ordering of slotted content when shadow: false #1270

Closed

adamdbradley closed this as completed in b8f22da Nov 13, 2019

Stencil automation moved this from Backlog 🤖 to Done 🎉 Nov 13, 2019

Jbcampbe mentioned this issue Aug 17, 2020

Elements rendered outside of slot when shadow not enabled #2641

Closed

abe-modyo mentioned this issue Aug 9, 2022

Usar map dynámico para renderizar elementos dentro de un slot de un componente generado con stencil deja el render fuera del component dynamic-framework/dynamic-ui#87

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Elements created with map added outside target slot #897

Elements created with map added outside target slot #897

davidrleonard commented Jul 2, 2018 •

edited

davidrleonard commented Jul 2, 2018

sebastien-yoobic commented Jul 16, 2018

kensodemann commented Jul 17, 2018

kensodemann commented Jul 17, 2018

ionitron-bot bot commented Aug 25, 2018

kensodemann commented Aug 27, 2018

kensodemann commented Oct 1, 2018

kensodemann commented Oct 5, 2018

kensodemann commented Oct 31, 2018

kensodemann commented Oct 31, 2018

kensodemann commented Nov 1, 2018

davidrleonard commented Nov 2, 2018

seifsay3d-zz commented Jul 31, 2019

petermikitsh commented Nov 10, 2019

seifsay3d-zz commented Nov 10, 2019

bschlenk commented Nov 11, 2019

NKBelousov commented Dec 25, 2019

NKBelousov commented Dec 25, 2019 •

edited

Gbuomprisco commented Jan 20, 2020

Elements created with map added outside target slot #897

Elements created with map added outside target slot #897

Comments

davidrleonard commented Jul 2, 2018 • edited

davidrleonard commented Jul 2, 2018

sebastien-yoobic commented Jul 16, 2018

kensodemann commented Jul 17, 2018

kensodemann commented Jul 17, 2018

ionitron-bot bot commented Aug 25, 2018

kensodemann commented Aug 27, 2018

kensodemann commented Oct 1, 2018

kensodemann commented Oct 5, 2018

kensodemann commented Oct 31, 2018

kensodemann commented Oct 31, 2018

kensodemann commented Nov 1, 2018

davidrleonard commented Nov 2, 2018

seifsay3d-zz commented Jul 31, 2019

petermikitsh commented Nov 10, 2019

seifsay3d-zz commented Nov 10, 2019

bschlenk commented Nov 11, 2019

NKBelousov commented Dec 25, 2019

NKBelousov commented Dec 25, 2019 • edited

Gbuomprisco commented Jan 20, 2020

davidrleonard commented Jul 2, 2018 •

edited

NKBelousov commented Dec 25, 2019 •

edited