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