roughed out default slot

pull/4348/head
Cris Ward 6 years ago
parent cf732809d6
commit 2408443372

@ -160,6 +160,9 @@ export default class Component {
}
this.tag = this.component_options.tag || compile_options.tag;
this.compile_options.shadowDom = this.component_options.shadowdom || "open";
if(this.compile_options.shadowDom === "none"){
// handle slots here?
}
} else {
this.tag = this.name.name;
}

@ -165,11 +165,14 @@ export let SvelteElement;
if (typeof HTMLElement === 'function') {
SvelteElement = class extends HTMLElement {
$$: T$$;
private _content;
constructor() {
super();
this._copycontent()
}
connectedCallback() {
this._slotcontent()
// @ts-ignore todo: improve typings
for (const key in this.$$.slotted) {
// @ts-ignore todo: improve typings
@ -177,6 +180,24 @@ if (typeof HTMLElement === 'function') {
}
}
_copycontent(){
if(this.children){
this._content = document.createElement("div")
while(this.childNodes.length > 0){
this._content.appendChild(this.childNodes[0])
}
}
}
_slotcontent(){
if(this._content){
const slot = this.querySelector("slot")
while(this._content.childNodes.length > 0){
slot.appendChild(this._content.childNodes[0])
}
}
}
attributeChangedCallback(attr, _oldValue, newValue) {
this[attr] = newValue;
}

@ -0,0 +1,11 @@
<svelte:options tag="custom-element" shadowdom="none" />
<div>
<slot>
<p>default fallback content</p>
</slot>
<slot name='foo'>
<p>foo fallback content</p>
</slot>
</div>

@ -0,0 +1,17 @@
import * as assert from 'assert';
import './main.svelte';
export default function (target) {
target.innerHTML = `
<custom-element>
<strong>slotted</strong>
</custom-element>`;
const el = target.querySelector('custom-element');
const div = el.children[0];
const [slot0] = div.children;
assert.equal(slot0.children[1], target.querySelector('strong'));
//assert.equal(slot1.assignedNodes().length, 0);
}
Loading…
Cancel
Save