mirror of https://github.com/sveltejs/svelte
support $$slots in custom elements (#5619)
parent
f7bddb23d3
commit
7949d8efac
@ -0,0 +1,31 @@
|
|||||||
|
<script>
|
||||||
|
let data = '';
|
||||||
|
|
||||||
|
if ($$slots.b) {
|
||||||
|
data = 'foo';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getData() {
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toString(data) {
|
||||||
|
const result = {};
|
||||||
|
const sortedKeys = Object.keys(data).sort();
|
||||||
|
sortedKeys.forEach(key => result[key] = data[key]);
|
||||||
|
return JSON.stringify(result);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:options tag="custom-element"/>
|
||||||
|
|
||||||
|
<slot></slot>
|
||||||
|
<slot name="a"></slot>
|
||||||
|
<p>$$slots: {toString($$slots)}</p>
|
||||||
|
{#if $$slots.b}
|
||||||
|
<div>
|
||||||
|
<slot name="b"></slot>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p>Slot b is not available</p>
|
||||||
|
{/if}
|
@ -0,0 +1,28 @@
|
|||||||
|
import * as assert from 'assert';
|
||||||
|
import './main.svelte';
|
||||||
|
|
||||||
|
export default function (target) {
|
||||||
|
target.innerHTML = `
|
||||||
|
<custom-element><span slot="a">hello world</span><span>bye</span><span>world</span></custom-element>
|
||||||
|
<custom-element><span slot="a">hello world</span><span slot="b">hello world</span><span>bye world</span></custom-element>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const [a, b] = target.querySelectorAll('custom-element');
|
||||||
|
|
||||||
|
assert.htmlEqual(a.shadowRoot.innerHTML, `
|
||||||
|
<slot></slot>
|
||||||
|
<slot name="a"></slot>
|
||||||
|
<p>$$slots: {"a":true,"default":true}</p>
|
||||||
|
<p>Slot b is not available</p>
|
||||||
|
`);
|
||||||
|
|
||||||
|
assert.htmlEqual(b.shadowRoot.innerHTML, `
|
||||||
|
<slot></slot>
|
||||||
|
<slot name="a"></slot>
|
||||||
|
<p>$$slots: {"a":true,"b":true,"default":true}</p>
|
||||||
|
<div><slot name="b"></slot></div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
assert.equal(a.getData(), '');
|
||||||
|
assert.equal(b.getData(), 'foo');
|
||||||
|
}
|
Loading…
Reference in new issue