Changed order in which setup will be called

Author: JulianFun123

README.md

@@ -1,4 +1,4 @@
-# JDOM `3.1.9`
+# JDOM `3.1.10`
 ## A wrapper for query selector and html elements + templating & reactivity framework
 
 - [Installation or embedding](#install)
@@ -28,12 +28,12 @@ npm install jdomjs
 
 ### Module
 ```js
-import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.1.9'
+import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.1.10'
 ```
 
 ### HTML import
 ```js
-<script src="https://cdn.jsdelivr.net/npm/jdom@3.1.9/dist/jdom.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jdom@3.1.10/dist/jdom.js"></script>
 ```
 
 ## DOM Manipulation

dist/jdom.js

@@ -1,7 +1,7 @@
 import { JDOMComponent, $, html, css, computed } from '../../index.js';
 import Hook from "../../src/Hook.js";
 
-class ToDoApp extends JDOMComponent {
+class ToDoApp extends JDOMComponent.unshadowed {
     tasks = new Hook([]);
     newTaskText = new Hook('');
 
@@ -64,5 +64,7 @@ class ToDoApp extends JDOMComponent {
     }
 }
 
+console.log(ToDoApp.unshadowed)
+
 // Register custom element
 window.customElements.define('todo-app', ToDoApp);

examples/js-components/main.js

@@ -1,6 +1,6 @@
 {
   "name": "jdomjs",
-  "version": "3.1.9",
+  "version": "3.1.10",
   "description": "A wrapper for query selector and html elements",
   "main": "./index.js",
   "types": "./types/index.d.ts",

package-lock.json

@@ -148,4 +148,13 @@ export default class JDOMComponent extends HTMLElement {
     styles() {
         return undefined
     }
+
+    /**
+     * @type {typeof JDOMComponent}
+     */
+    static unshadowed = class JDOMUnshadowedComponent extends JDOMComponent {
+        constructor(options = {}) {
+            super({ shadowed: false, ...options })
+        }
+    }
 }

package.json

@@ -91,9 +91,12 @@ export default class TemplateDOMAdapter {
                             Object.entries(value).forEach(([key, value]) => {
                                 if (value instanceof Hook) {
                                     const hook = value
-                                    const listener = v => el.style[key] = v
-                                    el.addEventListener(':detached', () => hook.removeListener(listener))
-                                    el.addEventListener(':attached', () => hook.addListener(listener))
+                                    const listener = v => elem.style[key] = v
+                                    elem.addEventListener(':detached', () => hook.removeListener(listener))
+                                    elem.addEventListener(':attached', () => {
+                                        hook.addListener(listener)
+                                        listener(hook.value)
+                                    })
 
                                     value = hook.value
                                 }
@@ -111,15 +114,21 @@ export default class TemplateDOMAdapter {
                                 Object.entries(value).forEach(([key, value]) => {
                                     if (value instanceof Hook) {
                                         const hook = value
+
                                         const listener = v => {
-                                            if (v && !el.classList.contains(key)) {
-                                                el.classList.add(key)
-                                            } else if (!v && el.classList.contains(key)) {
-                                                el.classList.remove(key)
+                                            if (v && !elem.classList.contains(key)) {
+                                                elem.classList.add(key)
+                                            } else if (!v && elem.classList.contains(key)) {
+                                                elem.classList.remove(key)
                                             }
                                         }
-                                        el.addEventListener(':detached', () => hook.removeListener(listener))
-                                        el.addEventListener(':attached', () => hook.addListener(listener))
+                                        elem.addEventListener(':detached', () => {
+                                            hook.removeListener(listener)
+                                        })
+                                        elem.addEventListener(':attached', () => {
+                                            hook.addListener(listener)
+                                            listener(hook.value)
+                                        })
                                         value = hook.value
                                     }
                                     if (value) {
@@ -311,12 +320,12 @@ export default class TemplateDOMAdapter {
                 lastValue = value
 
                 if (value) {
-                    toRepl = this.replaceElement(toRepl, savedElement)
-                    el = savedElement
                     if (!addedChildren) {
-                        setup(el)
+                        setup(savedElement)
                         addedChildren = true
                     }
+                    toRepl = this.replaceElement(toRepl, savedElement)
+                    el = savedElement
                 } else {
                     toRepl = this.replaceElement(toRepl, commentElement)
                     el = commentElement
@@ -504,14 +513,19 @@ export default class TemplateDOMAdapter {
 
         replElements.forEach(e => this.removeElement(e))
 
+        firstEl.dispatchEvent(new CustomEvent(':detached'))
+        firstEndEl.dispatchEvent(new CustomEvent(':child_attached'))
+
         let lastEl = firstEndEl
+        firstEndEl.dispatchEvent(new CustomEvent(':attach'))
+
         endElements.forEach(e => {
             lastEl = this.afterElement(lastEl, e)
         })
 
+        firstEndEl.dispatchEvent(new CustomEvent(':attached'))
+
         firstEl.dispatchEvent(new CustomEvent(':replaced_with', { detail: { to: finalEndElements } }))
-        firstEl.dispatchEvent(new CustomEvent(':detached'))
-        firstEndEl.dispatchEvent(new CustomEvent(':child_attached'))
 
         return finalEnd
     }

src/JDOMComponent.js

@@ -8,6 +8,10 @@
  * @property {String|null|undefined} name
  */
 export default class JDOMComponent extends HTMLElement {
+    /**
+     * @type {typeof JDOMComponent}
+     */
+    static unshadowed: typeof JDOMComponent;
     /** @param options */
     constructor(options?: {});
     /** @type {ShadowRoot|Node} */