fix(runtime): dynamic slot name change

[tanner-reits]

What is the current behavior?

Stencil's runtime will not change the name of a slot element when the name attribute is bound to a @Prop(). This is an issue for both shadow and non-shadow components.

Fixes: #2982

What is the new behavior?

The runtime will now correctly update the name attribute of slots and pseudo-slots to render the correct content on re-renders.

Documentation

stenciljs/site#1337

Does this introduce a breaking change?

• Yes
• No

Testing

Automated Testing
New e2e tests were added for this use case

Manual Testing

1. Spin-up a new Stencil component starter
2. Enable extras.experimentalSlotFixes in the Stencil config
3. Update the contents of my-component.tsx to the following:

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

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  scoped: true,
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop({ reflect: true }) slotName = 'main';

  render() {
    return (
      <div>
        <slot name={this.slotName}></slot>
      </div>
    );
  }
}

4. Update the content of body in index.html to the following:

    <my-component>
      <p slot="main">Hello</p>
      <p slot="secondary">Goodbye</p>
    </my-component>

    <button>Toggle</button>

    <script>
      document.querySelector('button').addEventListener('click', () => {
        document.querySelector('my-component').setAttribute('slot-name', 'secondary');
      });
    </script>

5. Run npm start
6. After clicking the bottom the contents should not change
7. Install a build of this branch. Run npm start again and observe the contents change when clicking the button
8. Repeat while setting shadow: true on the component

Other information

The fix for the scoped variation of this issue is placed behind the extras.experimentalSlotFixes flag.

[github-actions]

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1207 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files

Path	Error Count
src/dev-server/index.ts	37
src/mock-doc/serialize-node.ts	36
src/dev-server/server-process.ts	32
src/compiler/prerender/prerender-main.ts	22
src/testing/puppeteer/puppeteer-element.ts	22
src/runtime/client-hydrate.ts	20
src/screenshot/connector-base.ts	19
src/runtime/vdom/vdom-render.ts	17
src/compiler/config/test/validate-paths.spec.ts	16
src/dev-server/request-handler.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.ts	14
src/compiler/transpile/transpile-module.ts	14
src/sys/node/node-sys.ts	14
src/compiler/prerender/prerender-queue.ts	13
src/compiler/sys/in-memory-fs.ts	13
src/runtime/connected-callback.ts	13
src/runtime/set-value.ts	13
src/compiler/output-targets/output-www.ts	12
src/compiler/transformers/test/parse-vdom.spec.ts	12

Our most common errors

Typescript Error Code	Count
TS2345	366
TS2322	362
TS18048	224
TS18047	99
TS2722	37
TS2532	26
TS2531	23
TS2454	14
TS2790	11
TS2352	10
TS2769	8
TS2538	8
TS2344	6
TS2416	6
TS2493	3
TS18046	2
TS2684	1
TS2430	1

Unused exports report

There are 14 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

Unused exports

File	Line	Identifier
src/runtime/bootstrap-lazy.ts	21	setNonce
src/screenshot/screenshot-fs.ts	18	readScreenshotData
src/testing/testing-utils.ts	198	withSilentWarn
src/utils/index.ts	145	CUSTOM
src/utils/index.ts	269	normalize
src/utils/index.ts	7	escapeRegExpSpecialCharacters
src/compiler/app-core/app-data.ts	25	BUILD
src/compiler/app-core/app-data.ts	115	Env
src/compiler/app-core/app-data.ts	117	NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts	123	updateCacheFromRebuild
src/compiler/types/validate-primary-package-output-target.ts	61	satisfies
src/compiler/types/validate-primary-package-output-target.ts	61	Record
src/testing/puppeteer/puppeteer-declarations.ts	485	WaitForEventOptions
src/compiler/sys/fetch/write-fetch-success.ts	7	writeFetchSuccessSync

[rwaskiewicz]

One question regarding behavior. Below I have 2 videos - both use the example code that you have in the PR summary.

The first video uses shadow: true in the component. When I hit the button, the "Goodbye" text gets slotted into the shadow dom, and the "Hello" text disappears.
https://github.com/ionic-team/stencil/assets/1930213/f6fc975e-968d-44e7-8f85-06fdfe58e5e1

The first video uses scoped: true in the component. When I hit the button, the 'Hello' text is added to the light-ish dom (since we're using scoped, it's all the light dom 😛), and the 'Goodbye' text is slotted into the slot in my-component:
https://github.com/ionic-team/stencil/assets/1930213/a10f4397-b171-4f85-adf8-72c8f5d695f9

Is this difference in behavior expected here?

[tanner-reits]

@rwaskiewicz So turns out the scoped variation for this fix relies on another slot fix we put behind experimentalSlotFixes (I just didn't realize I had that flag on locally and our e2e tests enable it). So, I updated the code to put this fix behind the flag as well. Updated the PR summary and testing steps to include enabling that flag to see the desired effects. I'll get a docs PR open to list this fix behind that flag as well. Sorry bout that!

[christian-bromann]

👍