From bf82f103667edb1e193b0d71a7e7c20304c0e314 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Sun, 4 Jun 2023 16:48:13 -0500 Subject: [PATCH 1/5] fix: register slot element, add skeleton --- esm/html/slot-element.js | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/esm/html/slot-element.js b/esm/html/slot-element.js index 356a60fc..d9f27df8 100644 --- a/esm/html/slot-element.js +++ b/esm/html/slot-element.js @@ -1,10 +1,29 @@ import {HTMLElement} from './element.js'; +import {registerHTMLClass} from '../shared/register-html-class.js'; + +const tagName = 'slot'; /** * @implements globalThis.HTMLSlotElement */ -export class HTMLSlotElement extends HTMLElement { - constructor(ownerDocument, localName = 'slot') { +class HTMLSlotElement extends HTMLElement { + constructor(ownerDocument, localName = tagName) { super(ownerDocument, localName); } + + /* c8 ignore start */ + assign() {} + + assignedNodes() { + return []; + } + + assignedElements() { + return []; + } + /* c8 ignore stop */ } + +registerHTMLClass(tagName, HTMLSlotElement); + +export {HTMLSlotElement}; From 60c5aab9bb2b1baee1659e2714159d7368095b51 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Sat, 10 Jun 2023 14:36:01 -0500 Subject: [PATCH 2/5] feat: implement assignedNodes, assignedElements --- esm/html/element.js | 2 ++ esm/html/slot-element.js | 33 +++++++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/esm/html/element.js b/esm/html/element.js index 4ee28212..1e0671cf 100644 --- a/esm/html/element.js +++ b/esm/html/element.js @@ -98,6 +98,8 @@ export class HTMLElement extends Element { set lang(value) { stringAttribute.set(this, 'lang', value); } get title() { return stringAttribute.get(this, 'title'); } set title(value) { stringAttribute.set(this, 'title', value); } + get slot() { return stringAttribute.get(this, 'slot'); } + set slot(value) { stringAttribute.set(this, 'slot', value); } // DOM Level 0 get onabort() { return level0.get(this, 'onabort'); } diff --git a/esm/html/slot-element.js b/esm/html/slot-element.js index d9f27df8..9213b72d 100644 --- a/esm/html/slot-element.js +++ b/esm/html/slot-element.js @@ -12,14 +12,39 @@ class HTMLSlotElement extends HTMLElement { } /* c8 ignore start */ + get name() { return this.getAttribute('name'); } + set name(value) { this.setAttribute('name', value); } + assign() {} - assignedNodes() { - return []; + assignedNodes(options) { + const isNamedSlot = !!this.name; + const hostChildNodes = this.getRootNode().host?.childNodes ?? []; + let slottables = []; + + if (isNamedSlot) { + slottables = [...hostChildNodes].filter(node => node.slot === this.name); + } else { + slottables = [...hostChildNodes].filter(node => !node.slot); + } + + if (options?.flatten) { + let result = []; + for (let slottable of slottables) { + if (slottable.localName === 'slot') { + result.push(...slottable.assignedNodes({ flatten: true })); + } else { + result.push(slottable); + } + } + return result; + } + + return slottables; } - assignedElements() { - return []; + assignedElements(options) { + return this.assignedNodes(options).filter(node => node.nodeType === 1); } /* c8 ignore stop */ } From 3170e353678237406efbf1cd000523d1e09da8f2 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Sat, 10 Jun 2023 17:17:07 -0500 Subject: [PATCH 3/5] fix: move slot prop to Element class --- esm/html/element.js | 2 -- esm/interface/element.js | 3 +++ 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/esm/html/element.js b/esm/html/element.js index 1e0671cf..4ee28212 100644 --- a/esm/html/element.js +++ b/esm/html/element.js @@ -98,8 +98,6 @@ export class HTMLElement extends Element { set lang(value) { stringAttribute.set(this, 'lang', value); } get title() { return stringAttribute.get(this, 'title'); } set title(value) { stringAttribute.set(this, 'title', value); } - get slot() { return stringAttribute.get(this, 'slot'); } - set slot(value) { stringAttribute.set(this, 'slot', value); } // DOM Level 0 get onabort() { return level0.get(this, 'onabort'); } diff --git a/esm/interface/element.js b/esm/interface/element.js index 3f4b1afd..841d7f04 100644 --- a/esm/interface/element.js +++ b/esm/interface/element.js @@ -137,6 +137,9 @@ export class Element extends ParentNode { get tabIndex() { return numericAttribute.get(this, 'tabindex') || -1; } set tabIndex(value) { numericAttribute.set(this, 'tabindex', value); } + + get slot() { return stringAttribute.get(this, 'slot'); } + set slot(value) { stringAttribute.set(this, 'slot', value); } // From eceb557a26eb9039e5b39b1a00f4cc3645edc701 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Sat, 10 Jun 2023 17:32:26 -0500 Subject: [PATCH 4/5] fix: add slot fallback to assignedNodes --- esm/html/slot-element.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/esm/html/slot-element.js b/esm/html/slot-element.js index 9213b72d..5936403f 100644 --- a/esm/html/slot-element.js +++ b/esm/html/slot-element.js @@ -20,7 +20,7 @@ class HTMLSlotElement extends HTMLElement { assignedNodes(options) { const isNamedSlot = !!this.name; const hostChildNodes = this.getRootNode().host?.childNodes ?? []; - let slottables = []; + let slottables; if (isNamedSlot) { slottables = [...hostChildNodes].filter(node => node.slot === this.name); @@ -29,7 +29,9 @@ class HTMLSlotElement extends HTMLElement { } if (options?.flatten) { - let result = []; + const result = []; + + // Element and Text nodes are slottables. A slot can be a slottable. for (let slottable of slottables) { if (slottable.localName === 'slot') { result.push(...slottable.assignedNodes({ flatten: true })); @@ -37,10 +39,12 @@ class HTMLSlotElement extends HTMLElement { result.push(slottable); } } - return result; + + slottables = result; } - return slottables; + // If no assigned elements are found, it returns the slot's fallback content. + return slottables.length ? slottables : [...this.childNodes]; } assignedElements(options) { From bf211e789e2375a57d2798d3a427d8bf693b04ab Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Sat, 10 Jun 2023 17:41:00 -0500 Subject: [PATCH 5/5] fix: slot fallback --- esm/html/slot-element.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/esm/html/slot-element.js b/esm/html/slot-element.js index 5936403f..30eee404 100644 --- a/esm/html/slot-element.js +++ b/esm/html/slot-element.js @@ -43,12 +43,15 @@ class HTMLSlotElement extends HTMLElement { slottables = result; } - // If no assigned elements are found, it returns the slot's fallback content. + // If no assigned nodes are found, it returns the slot's fallback content. return slottables.length ? slottables : [...this.childNodes]; } assignedElements(options) { - return this.assignedNodes(options).filter(node => node.nodeType === 1); + const slottables = this.assignedNodes(options).filter(n => n.nodeType === 1); + + // If no assigned elements are found, it returns the slot's fallback content. + return slottables.length ? slottables : [...this.children]; } /* c8 ignore stop */ }