add slots management

README.md

@@ -9,6 +9,7 @@
   - `originalText(remove)` for getting the original `textContent`,
   - `originalFragment(remove)` for getting the original `childNodes` appended to a document fragment,
     - `remove` argument to delete from memory the text or fragment (default : true),
+  - `getSlotByName(name)` to get all mamed slots present as custom-element children but removed and stored for later use,
 - events
   - `onload` triggers when async init finishes (sync init also)
 - attributes

package.json

@@ -1,9 +1,19 @@
 {
   "name": "@titsoft/m-element",
-  "version": "0.7.0",
-  "description": "HTMLParsedElement extension",
+  "version": "0.8.0",
+  "description": "custom-element class with (a)sync loading, slots, error handling and level-up",
   "main": "src/index.js",
   "type": "module",
+  "keywords": [
+    "custom-elements",
+    "slots",
+    "asynchronous",
+    "synchronous",
+    "error handling",
+    "load event handling",
+    "life-cycle",
+    "level-up"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

src/index.js

@@ -14,6 +14,7 @@ const isAsyncFunction = fn => fn.constructor.name === 'AsyncFunction'
 export default class MElement extends HTMLParsedElement {
     #config
     #fragment
+    #slots
     constructor(config) {
         super()
         this.#config = config || {}
@@ -48,6 +49,9 @@ export default class MElement extends HTMLParsedElement {
     parsedCallback() {
         const that = this
         const end = (e) => that.#finish(e)
+        // slots removal and storage
+        this.#slots = this.querySelectorAll('slot')
+        this.#slots.forEach(e => e.remove())
         // move childNodes to a fragment
         this.#fragment = document.createDocumentFragment()
         this.#fragment.append(...this.childNodes)
@@ -69,4 +73,7 @@ export default class MElement extends HTMLParsedElement {
             end()
         } 
     }
+    getSlotByName(name) {
+        return [...this.#slots].filter(e => name && e.name === name) [0]
+    }
 }

test/index.html

@@ -28,11 +28,13 @@ <h1>output</h1>
 <!-- Retrieve content with orginalContent method -->
 <test-sync id="A5">a content</test-sync>
 <error-async id="A6" delay="500">a content</error-async>
-
 <!-- Retrieve content with originalFragment method -->
 <test-sync2 id="A7">
     <span>original fragment</span>
     <div></div>
 </test-sync2>
-
+<!-- slots tests -->
+<test-sync id="A8">
+    <slot name="slot-test">slot content</slot>
+</test-sync>
 </html>

test/index.js

@@ -53,7 +53,7 @@ customElements.define('error-async', class extends MElement {
         )
     }
 })
-const num = 6
+const num = 7
 const el = (id) => document.getElementById(id)
 Array(num).fill('').map((v, i)=>'A' + (i+1)).forEach (id => el(id).addEventListener('load', loaded))
 let loadedCount = 0
@@ -71,7 +71,10 @@ function runTests() {
         !document.getElementById('A4'),
         A5.originalText() === 'a content',
         A6.onError = true,
-        A7.children.length === 2
+        A7.children.length === 2,
+        A8.getSlotByName('slot-test').textContent === 'slot content'
+        && A8.querySelectorAll('slot').length === 0
+        && A8.getSlotByName('slot-foo') === undefined
     ]
     addResults(tests)
 }