bug: broken rendering of slot elements on component rerender

[aniederer-chatham]

Prerequisites

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

Stencil Version

4.8.1

Current Behavior

After performing the repro steps below, the app displays:

Body: Header

Expected Behavior

After performing the repro steps below, the app displays:

Body: Body

System Info

System: node 20.5.0
    Platform: linux (5.15.133.1-microsoft-standard-WSL2)
   CPU Model: 12th Gen Intel(R) Core(TM) i7-12700H (20 cpus)
    Compiler: /home/adam/Programs/stencil-slot-bug-poc/node_modules/@stencil/core/compiler/stencil.js
       Build: 1701707120
     Stencil: 4.8.1 🍹
  TypeScript: 5.2.2
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.24.0

Steps to Reproduce

Create this component:

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

@Component({
  tag: 'stencil-slot-bug-poc',
  shadow: true,
})
export class StencilBugPoc implements ComponentInterface {
  @State() private hasHeader: boolean = true;
  render() {
    return (
      <Host>
        <button onClick={() => this.hasHeader = !this.hasHeader}>
          hasHeader: {''+this.hasHeader}
        </button>
        <div>
          {this.hasHeader && <div>Header: <slot name="header" /></div>}
          <div>Body: <slot /></div>
        </div>
      </Host>
    );
  }
}

Use it like so:

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

@Component({
  tag: 'app-root',
  shadow: true,
})
export class AppRoot {
  render() {
    return (
      <Host>
        <stencil-slot-bug-poc>
          <span slot="header">Header</span>
          Body
        </stencil-slot-bug-poc>
      </Host>
    );
  }
}

Build the app. It will display this:

Click the button. It will now display this:

Code Reproduction URL

https://github.com/aniederer-chatham/stencil-slot-bug-poc

Additional Information

• Giving the body slot a name does not fix the issue
• experimentalSlotFixes does not fix the issue
• We've been experiencing this since ~2.x. Might also be in 1.x but have not tested it.
• We've been able to reproduce this under a ton of circumstances, not just changing component @State. My guess is that Stencil does not take a slot's name into account when determining whether they are equivalent somewhere.
• The bug does not occur when the DOM tree has other major differences, such as by changing <div>Body: <slot /></div> to <section>Body: <slot /></section>. Adding a class or attribute to the element is not a sufficient difference.

[aniederer-chatham]

Appears to not be fixed by #5143

[alicewriteswrongs]

I think that makes sense based on what I understand about the child-reconciliation issues that #5143 aims to address, I wouldn't actually expect that it would fix this issue since it's not directly addressing slot relocation logic and whatnot