Moving styles, Stacks working in Group

Test/Element/Group.test.js

@@ -15,4 +15,24 @@ window.testSuites.push( class testGroup {
         }
     }
 
+    VStack() {
+        let divs = Group(() => {
+            VStack(() => {
+                div()
+                div()
+                div()
+            })
+        })
+        
+        if(!(divs instanceof HTMLElement)) {
+            return `Did not receive an element!`
+        }
+        if(!(divs.style.display === "flex")) {
+            return `Did not receive a flex container!`
+        }
+        if(!(divs.children.length === 3)) {
+            return `Incorrect amount of children!`
+        }
+    }
+
 })

index.js

@@ -110,44 +110,6 @@ window.html = function html(htmlString) {
     return fragment;
 };
 
-/* STYLES */
-
-window.quillStyles = document.querySelector("style#shadows");
-if(!window.quillStyles) {
-    window.quillStyles = document.createElement('style');
-    window.quillStyles.id = "shadows";
-    document.head.appendChild(window.quillStyles);
-}
-
-window.quillStyles.add = function(tag) {
-    let stylesheet = this.querySelector(`:scope > style[id='${tag}']`)
-    tag = tag.replace(/\*/g, "all");
-    tag = tag.replace(/#/g, "id-");
-    tag = tag.replace(/,/g, "");
-    if(!stylesheet) {
-        stylesheet = document.createElement('style');
-        stylesheet.id = tag;
-        this.appendChild(stylesheet);
-    }
-}
-
-window.quillStyles.update = function(tag, string) {
-    let sheet = this.querySelector(`:scope > style[id='${tag}']`)?.sheet
-    if(!sheet) console.error('Quill: could not find stylesheet to update!')
-    
-    for (let i = 0; i < sheet.cssRules.length; i++) {
-        let rule = sheet.cssRules[i];
-        
-        if (rule.selectorText === tag || rule.selectorText === `${tag.toLowerCase()}`) {
-            sheet.deleteRule(i);
-            break;
-        }
-    }
-    
-    sheet.insertRule(`${tag} { ${string} }`, sheet.cssRules.length);
-}
-
-
 /* COMPATIBILITY */
 
 function detectMobile() {
@@ -295,6 +257,8 @@ window.Shadow = class Shadow extends HTMLElement {
 
 window.Registry = class Registry {
 
+    static style = document.querySelector("style#shadows");
+
     /*
         State Reactivity [stateName].get(elem).push(attribute)
             _observers = {
@@ -583,7 +547,7 @@ window.Registry = class Registry {
         });
 
         customElements.define(tagname, el)
-        quillStyles.add(tagname)
+        this.addStyle(tagname)
 
         // Actual Constructor
         window[el.prototype.constructor.name] = function (...params) {
@@ -593,6 +557,40 @@ window.Registry = class Registry {
             return elIncarnate
         }
     }
+
+    static addStyle = function(tag) {
+        let stylesheet = this.styles.querySelector(`:scope > style[id='${tag}']`)
+        tag = tag.replace(/\*/g, "all");
+        tag = tag.replace(/#/g, "id-");
+        tag = tag.replace(/,/g, "");
+        if(!stylesheet) {
+            stylesheet = document.createElement('style');
+            stylesheet.id = tag;
+            this.styles.appendChild(stylesheet);
+        }
+    }
+    
+    static updateStyle = function(tag, string) {
+        let sheet = this.styles.querySelector(`:scope > style[id='${tag}']`)?.sheet
+        if(!sheet) console.error('Quill: could not find stylesheet to update!')
+        
+        for (let i = 0; i < sheet.cssRules.length; i++) {
+            let rule = sheet.cssRules[i];
+            
+            if (rule.selectorText === tag || rule.selectorText === `${tag.toLowerCase()}`) {
+                sheet.deleteRule(i);
+                break;
+            }
+        }
+        
+        sheet.insertRule(`${tag} { ${string} }`, sheet.cssRules.length);
+    }
+}
+
+if(!Registry.styles) {
+    Registry.styles = document.createElement('style');
+    Registry.styles.id = "shadows";
+    document.head.appendChild(Registry.styles);
 }
 
 /* DEFAULT WRAPPERS */
@@ -662,12 +660,16 @@ window.ForEach = function (arr, cb) {
 
 window.VStack = function (cb = () => {}) {
     let nowRendering = window.rendering.last()
-    if(nowRendering.innerHTML === "") {
+    if(nowRendering.innerHTML === "") { // Parent is Empty, make it a VStack
         let styles =   `
             display: flex;
             flex-direction: column;
         `
-        quillStyles.update(nowRendering.tagName.toLowerCase(), styles)
+        if(nowRendering instanceof Shadow) {
+            Registry.updateStyle(nowRendering.tagName.toLowerCase(), styles)
+        } else {
+            nowRendering.style.cssText += styles
+        }
         cb()
         return nowRendering
     } else {
@@ -688,7 +690,11 @@ window.HStack = function (cb = () => {}) {
             display: flex;
             flex-direction: row;
         `
-        quillStyles.update(nowRendering.tagName.toLowerCase(), styles)
+        if(nowRendering instanceof Shadow) {
+            Registry.updateStyle(nowRendering.tagName.toLowerCase(), styles)
+        } else {
+            nowRendering.style.cssText += styles
+        }
         cb()
         return nowRendering
     }