mirror of https://github.com/sveltejs/svelte
fix slot with context overflow + without let (#4862)
parent
185706f7d0
commit
7834ca3c5b
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
let open = false;
|
||||
function toggle() {
|
||||
open = !open;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div on:click={toggle}>
|
||||
<slot name="target" {open}></slot>
|
||||
|
||||
<!-- This actually isn't necessary to reproduce. -->
|
||||
{#if open}
|
||||
<slot name="content"></slot>
|
||||
{/if}
|
||||
</div>
|
@ -0,0 +1,32 @@
|
||||
// overflow bitmask + slot missing `let:`
|
||||
export default {
|
||||
html: `
|
||||
<div>
|
||||
<button slot="target">Toggle inside 1</button>
|
||||
</div>
|
||||
<button>Toggle outside</button>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const button = target.querySelectorAll('button')[1];
|
||||
const div = target.querySelector('div');
|
||||
await div.dispatchEvent(new window.MouseEvent('click'));
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<button slot="target">Toggle inside 1</button>
|
||||
<div slot="content">Open</div>
|
||||
</div>
|
||||
<button>Toggle outside</button>
|
||||
`);
|
||||
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<button slot="target">Toggle inside 2</button>
|
||||
<div slot="content">Open</div>
|
||||
</div>
|
||||
<button>Toggle outside</button>
|
||||
`);
|
||||
}
|
||||
};
|
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
import Slotted from './Slotted.svelte';
|
||||
let lotsOfNumbers = Array.from({length: 50}, () => 1);
|
||||
|
||||
let [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, aa, ab, ac, ad, ae, af, ag, ah] = lotsOfNumbers;
|
||||
|
||||
let last = 1;
|
||||
function toggle () {
|
||||
last = 2;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Slotted>
|
||||
<button slot="target">
|
||||
Toggle inside {last}
|
||||
</button>
|
||||
|
||||
<div slot="content">
|
||||
Open
|
||||
</div>
|
||||
</Slotted>
|
||||
|
||||
<button on:click={toggle}>Toggle outside</button>
|
Loading…
Reference in new issue