-
Notifications
You must be signed in to change notification settings - Fork 794
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(runtime): dynamic slot name change (#5304)
* fix for shadow components Fixes an issue where a slot's `name` attribute would not update correctly if it was bound to a `@Prop()` (for Shadow DOM components) STENCIL-295 * fix for scoped components Fixes an issue where a slot's `name` attribute would not update correctly if it was bound to a `@Prop()` (for non-Shadow DOM components) STENCIL-295 * add e2e tests * little comment on change * put scoped changes behind slot fix flag
- Loading branch information
1 parent
97138a4
commit 9d9fe41
Showing
6 changed files
with
141 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
test/karma/test-app/slot-dynamic-name-change/cmp-scoped.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { Component, h, Prop } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'slot-dynamic-name-change-scoped', | ||
| scoped: true, | ||
| }) | ||
| export class SlotDynamicNameChangeScoped { | ||
| @Prop() slotName = 'greeting'; | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <slot name={this.slotName}></slot> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
17 changes: 17 additions & 0 deletions
17
test/karma/test-app/slot-dynamic-name-change/cmp-shadow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { Component, h, Prop } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'slot-dynamic-name-change-shadow', | ||
| shadow: true, | ||
| }) | ||
| export class SlotDynamicNameChangeShadow { | ||
| @Prop() slotName = 'greeting'; | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <slot name={this.slotName}></slot> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <!doctype html> | ||
| <meta charset="utf8" /> | ||
| <script src="./build/testapp.esm.js" type="module"></script> | ||
| <script src="./build/testapp.js" nomodule></script> | ||
|
|
||
| <slot-dynamic-name-change-shadow> | ||
| <p slot="greeting">Hello</p> | ||
| <p slot="farewell">Goodbye</p> | ||
| </slot-dynamic-name-change-shadow> | ||
| <slot-dynamic-name-change-scoped> | ||
| <p slot="greeting">Hello</p> | ||
| <p slot="farewell">Goodbye</p> | ||
| </slot-dynamic-name-change-scoped> | ||
|
|
||
| <button>Toggle slot name</button> | ||
|
|
||
| <script> | ||
| document.querySelector('button').addEventListener('click', () => { | ||
| document.querySelector('slot-dynamic-name-change-shadow').setAttribute('slot-name', 'farewell'); | ||
| document.querySelector('slot-dynamic-name-change-scoped').setAttribute('slot-name', 'farewell'); | ||
| }); | ||
| </script> |
40 changes: 40 additions & 0 deletions
40
test/karma/test-app/slot-dynamic-name-change/karma.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { setupDomTests, waitForChanges } from '../util'; | ||
|
|
||
| /** | ||
| * Tests the case where a `slot` element in a component has its | ||
| * `name` attribute changed dynamically via a property. | ||
| */ | ||
| describe('slot dynamic name change', () => { | ||
| const { setupDom, tearDownDom } = setupDomTests(document); | ||
| let app: HTMLElement; | ||
|
|
||
| beforeEach(async () => { | ||
| app = await setupDom('/slot-dynamic-name-change/index.html'); | ||
| }); | ||
|
|
||
| afterEach(tearDownDom); | ||
|
|
||
| it('should change the slot name for a shadow component', async () => { | ||
| const cmp = app.querySelector('slot-dynamic-name-change-shadow'); | ||
| expect(cmp.innerText).toBe('Hello'); | ||
| expect(cmp.shadowRoot.querySelector('slot').getAttribute('name')).toBe('greeting'); | ||
|
|
||
| app.querySelector('button').click(); | ||
| await waitForChanges(); | ||
|
|
||
| expect(cmp.innerText).toBe('Goodbye'); | ||
| expect(cmp.shadowRoot.querySelector('slot').getAttribute('name')).toBe('farewell'); | ||
| }); | ||
|
|
||
| it('should change the slot name for a scoped component', async () => { | ||
| const cmp = app.querySelector('slot-dynamic-name-change-scoped'); | ||
| expect(cmp.innerText).toBe('Hello'); | ||
| expect(cmp.querySelector('p:not([hidden])').getAttribute('slot')).toBe('greeting'); | ||
|
|
||
| app.querySelector('button').click(); | ||
| await waitForChanges(); | ||
|
|
||
| expect(cmp.innerText).toBe('Goodbye'); | ||
| expect(cmp.querySelector('p:not([hidden])').getAttribute('slot')).toBe('farewell'); | ||
| }); | ||
| }); |