Release 0.16

.github/workflows/node.js.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [20]
 
     steps:
     - uses: actions/checkout@v2

cjs/html/slot-element.js

@@ -1,12 +1,62 @@
 'use strict';
 const {HTMLElement} = require('./element.js');
+const {registerHTMLClass} = require('../shared/register-html-class.js');
+
+const tagName = 'slot';
 
 /**
  * @implements globalThis.HTMLSlotElement
  */
 class HTMLSlotElement extends HTMLElement {
-  constructor(ownerDocument, localName = 'slot') {
+  constructor(ownerDocument, localName = tagName) {
     super(ownerDocument, localName);
   }
+
+  /* c8 ignore start */
+  get name() { return this.getAttribute('name'); }
+  set name(value) { this.setAttribute('name', value); }
+
+  assign() {}
+
+  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) {
+      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 }));
+        } else {
+          result.push(slottable);
+        }
+      }
+
+      slottables = result;
+    }
+
+    // If no assigned nodes are found, it returns the slot's fallback content.
+    return slottables.length ? slottables : [...this.childNodes];
+  }
+
+  assignedElements(options) {
+    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 */
 }
-exports.HTMLSlotElement = HTMLSlotElement
+
+registerHTMLClass(tagName, HTMLSlotElement);
+
+exports.HTMLSlotElement = HTMLSlotElement;

cjs/interface/element.js

@@ -150,6 +150,9 @@ 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); }
   // </specialGetters>
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedom",
-  "version": "0.15.6",
+  "version": "0.16.0",
   "description": "A triple-linked lists based DOM implementation",
   "main": "./cjs/index.js",
   "types": "./types/index.d.ts",

types/esm/html/slot-element.d.ts

@@ -2,5 +2,10 @@
  * @implements globalThis.HTMLSlotElement
  */
 export class HTMLSlotElement extends HTMLElement implements globalThis.HTMLSlotElement {
+    set name(arg: any);
+    get name(): any;
+    assign(): void;
+    assignedNodes(options: any): any[];
+    assignedElements(options: any): any[];
 }
 import { HTMLElement } from "./element.js";

types/esm/interface/element.d.ts

@@ -30,6 +30,8 @@ export class Element extends ParentNode implements globalThis.Element {
     get style(): any;
     set tabIndex(arg: number);
     get tabIndex(): number;
+    set slot(arg: any);
+    get slot(): any;
     get innerText(): string;
     set innerHTML(arg: any);
     get innerHTML(): any;

types/esm/interface/image.d.ts

@@ -120,6 +120,7 @@ export function ImageClass(ownerDocument: any): {
         nonce: any;
         readonly style: any;
         tabIndex: number;
+        slot: any;
         readonly innerText: string;
         textContent: string;
         innerHTML: string;

types/esm/interface/node.d.ts

@@ -39,7 +39,7 @@ export class Node extends EventTarget implements globalThis.Node {
     set textContent(arg: any);
     get textContent(): any;
     normalize(): void;
-    cloneNode(deep?: boolean): any;
+    cloneNode(): any;
     contains(): boolean;
     /**
      * Inserts a node before a reference node as a child of this parent node.