-
Notifications
You must be signed in to change notification settings - Fork 781
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(runtime): relocate slot content from non-shadow to shadow compone…
…nts w/ slot name change (#4940) * yo this might actually work * create single build flag for `experimentalSlotFixes` * gate new vDOM logic behind build flag * add e2e test for repro case * document new node property * fix(runtime): keep track of a slot's slot attribute for shadow contexts * ignore non-element nodes * add e2e test for repro case * fix SNC * comment prop assignment * PR feedback
- Loading branch information
1 parent
adb3ccf
commit 0fe78c7
Showing
8 changed files
with
191 additions
and
3 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
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/non-shadow-to-shadow-slot-relocation/drop-down-content.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 } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'drop-down-content', | ||
| shadow: true, | ||
| }) | ||
| export class DropdownContent { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <p>content before</p> | ||
| <slot /> | ||
| <p>content after</p> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
18 changes: 18 additions & 0 deletions
18
test/karma/test-app/non-shadow-to-shadow-slot-relocation/drop-down.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,18 @@ | ||
| import { Component, h } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'drop-down', | ||
| shadow: true, | ||
| }) | ||
| export class Dropdown { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <p>dropdown before</p> | ||
| <slot name="main-content" /> | ||
| <slot name="dropdown-content-element" /> | ||
| <p>dropdown after</p> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
9 changes: 9 additions & 0 deletions
9
test/karma/test-app/non-shadow-to-shadow-slot-relocation/index.html
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,9 @@ | ||
| <!doctype html> | ||
| <meta charset="utf8" /> | ||
| <script src="./build/testapp.esm.js" type="module"></script> | ||
| <script src="./build/testapp.js" nomodule></script> | ||
|
|
||
| <non-shadow-host> | ||
| <b slot="main-content">main slotted content</b> | ||
| <b slot="dropdown-content">dropdown slotted content</b> | ||
| </non-shadow-host> |
38 changes: 38 additions & 0 deletions
38
test/karma/test-app/non-shadow-to-shadow-slot-relocation/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,38 @@ | ||
| import { setupDomTests } from '../util'; | ||
|
|
||
| describe('non-shadow-to-shadow-slot-relocation', () => { | ||
| const { setupDom, tearDownDom } = setupDomTests(document); | ||
| let app: HTMLElement | undefined; | ||
| let host: HTMLElement | undefined; | ||
|
|
||
| beforeEach(async () => { | ||
| app = await setupDom('non-shadow-to-shadow-slot-relocation/index.html'); | ||
| host = app.querySelector('non-shadow-host'); | ||
| }); | ||
|
|
||
| afterEach(tearDownDom); | ||
|
|
||
| it('should correctly render slotted content', () => { | ||
| expect(host).toBeDefined(); | ||
|
|
||
| const mainDiv = host.firstElementChild.firstElementChild; | ||
| expect(mainDiv).toBeDefined(); | ||
| expect(mainDiv.children.length).toBe(2); | ||
|
|
||
| // Main content | ||
| expect(mainDiv.children[0].tagName).toBe('B'); | ||
| expect(mainDiv.children[0].getAttribute('slot')).toBe('main-content'); | ||
|
|
||
| // Dropdown content | ||
| const slottedDiv = mainDiv.children[1]; | ||
| expect(slottedDiv.tagName).toBe('DIV'); | ||
| expect(slottedDiv.getAttribute('slot')).toBe('dropdown-content-element'); | ||
| expect(slottedDiv.children.length).toBe(1); | ||
|
|
||
| const slottedDropdownContent = slottedDiv.children[0]; | ||
| expect(slottedDropdownContent.tagName).toBe('DROP-DOWN-CONTENT'); | ||
| expect(slottedDropdownContent.children.length).toBe(1); | ||
| expect(slottedDropdownContent.children[0].tagName).toBe('B'); | ||
| expect(slottedDropdownContent.children[0].getAttribute('slot')).toBe(null); | ||
| }); | ||
| }); |
22 changes: 22 additions & 0 deletions
22
test/karma/test-app/non-shadow-to-shadow-slot-relocation/non-shadow-host.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,22 @@ | ||
| import { Component, h } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'non-shadow-host', | ||
| shadow: false, | ||
| }) | ||
| export class NonShadowHost { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <drop-down> | ||
| <slot name="main-content" slot="main-content" /> | ||
| <div slot="dropdown-content-element"> | ||
| <drop-down-content> | ||
| <slot name="dropdown-content" /> | ||
| </drop-down-content> | ||
| </div> | ||
| </drop-down> | ||
| </div> | ||
| ); | ||
| } | ||
| } |