bug: slot name not updated when a new render is triggered

DavideMininni-Fincons commented 1 year ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already report this problem, without success.

Stencil Version

3.3.0

Current Behavior

Hello guys :) I'm actually working on a breadcrumb-group component.

One of the requested feature is: when the breadcrumbs in the group exceed the container width, only the first and the last should be visibile, plus an ellipsis one between them.

To do this:

I check for the slotted breadcrumbs and assign them to an array;
I have to wait for the 1st render in order to calculate their effective full width, so I dynamically reflect each of them in a separate slot named breadcrumb-0, breadcrumb-1 etc within a li;
in the componentDidLoad I do the width check and possibly set a State variable to true;
this triggers a re-render, in which I would like to render only the slot with name breadcrumb-0, the ellipsis 'fake' element, and the slot named breadcrumb-{last element in the list}

In the first render, everything works, so considering 4 elements, the html is something like this:

<breadcrumb-group role="navigation" class="hydrated">
  # shadow-root
    <ol class="breadcrumb-group">
      <li class="breadcrumb-group__item"><slot name="breadcrumb-0"></slot></li>
      <li class="breadcrumb-group__item"><slot name="breadcrumb-1"></slot></li>
      <li class="breadcrumb-group__item"><slot name="breadcrumb-2"></slot></li>
      <li class="breadcrumb-group__item"><slot name="breadcrumb-3"></slot></li>
    </ol>
  <breadcrumb href="/" slot="breadcrumb-0" class="hydrated">Breadcrumb 0</breadcrumb>
  <breadcrumb href="/" slot="breadcrumb-1" class="hydrated">Breadcrumb 1</breadcrumb>
  <breadcrumb href="/" slot="breadcrumb-2" class="hydrated">Breadcrumb 2</breadcrumb>
  <breadcrumb href="/" slot="breadcrumb-3" class="hydrated">Breadcrumb 3</breadcrumb>
</breadcrumb-group>

But when I re-render, after the State change, I have this in the shadow-root:

<breadcrumb-group role="navigation" class="hydrated">
  # shadow-root
    <ol class="breadcrumb-group">
      <li class="breadcrumb-group__item"><slot name="breadcrumb-0"></slot></li>
      <li class="breadcrumb-group__item"><fake-ellipsis></fake-ellipsis></li>
      <li class="breadcrumb-group__item"><slot name="breadcrumb-2"></slot></li>
    </ol>
</breadcrumb-group>

The last breadcrumb is the named breadcrumb-2, instead then the number 3.

I did various tests and it seems that in the second render, the slot name prop is not 'recalculated', eg.

if I fix the breadcrumbs number to n, and I ask to specifically print the n-th one as last, instead then the breadcrumb-{last element in the list}, it still doesn't work;
if I add the fake-ellipsis element in the breadcrumb array using the splice method, adding it in 2nd position and removing all the items except from the first and the last, it still doesn't work;
same as previous point, but I do not remove items from the array (I hide them via css): the slot named breadcrumb-1 disappears and in the last position I have two elements with the same slot name;
if I add an hardcored slot after the last one, eg. a slot named foo, it prints the slot after the number 2, so number 3, and it keeps the name breadcrumb-3 instead then foo.

Expected Behavior

I expect that the last slot has the correct name, in order to have the right content in it.

System Info

System: node 16.18.0
Platform: darwin (22.4.0)
CPU Model: Apple M1 Pro (8 cpus)
Compiler: /Users/davide.mininni/workspace/workspace_personal/stencil-demo-issues/node_modules/@stencil/core/compiler/stencil.js
Build: 1684864267
Stencil: 3.3.0 🍭
TypeScript: 5.0.4
Rollup: 2.42.3
Parse5: 7.1.2
Sizzle: 2.42.3
Terser: 5.17.4

Steps to Reproduce

Checkout https://github.com/DavideMininni-Fincons/stencil-demo-issues.git
Launch it
Check HTML
Possibly uncomment code following the FIXMEs to check the other described cases.

Code Reproduction URL

https://github.com/DavideMininni-Fincons/stencil-demo-issues.git

Additional Information

Repo with the original breadcrumb issue: https://github.com/lyne-design-system/lyne-components/tree/feat/sbb-breadcrumb with temporary fix: https://github.com/lyne-design-system/lyne-components/commit/b85927766d25af523a2dcd45546db40249fd0ccc#diff-31f35f89d4cbf3dba3b49db0028c7fde7c391ad9700c239988330e5baee85f11R108

johnjenkins commented 1 year ago

hey! Just wondering if you've tried adding key attributes to your lists? https://stenciljs.com/docs/templating-jsx#dealing-with-children < the value of which must be unique (an iterator int won't cut it)

ionitron-bot[bot] commented 7 months ago

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!

rwaskiewicz commented 7 months ago

Reopening - this shouldn't have been closed. Sorry about that!

ionic-team / stencil