Fix registering bug

Author: WebCoder49

code-input.css

@@ -13,16 +13,17 @@ code-input {
   overflow: hidden;
 
   /* Normal inline styles */
-  padding: 8px;
-  margin: 0!important;
-  width: calc(100% - 16px);
+  margin: 8px;
+  --padding: 16px;
   height: 250px;
+
   font-size: normal;
   font-family: monospace;
   line-height: 1.5; /* Inherited to child elements */
   tab-size: 2;
   caret-color: darkgrey;
   white-space: pre;
+  padding: 0!important; /* Use --padding */
 }
 
 code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
@@ -106,7 +107,7 @@ code-input textarea {
   outline: none!important;
 }
 
-code-input:not(.code-input_registered)::before {
+code-input:not(.code-input_registered)::after {
   /* Display message to register */
   content: "Use codeInput.registerTemplate to set up.";
   display: block;

code-input.js

@@ -100,25 +100,31 @@ var codeInput = {
                 throw TypeError(`code-input: Template for "${templateName}" invalid, because the plugin provided at index ${i} is not valid; it is "${template.plugins[i]}". Please make sure you use one of the constructors in codeInput.templates, and that you provide the correct arguments.`);
             }
         });
+
 
         codeInput.usedTemplates[templateName] = template;
         // Add waiting code-input elements wanting this template from queue
         if (templateName in codeInput.templateNotYetRegisteredQueue) {
             for (let i in codeInput.templateNotYetRegisteredQueue[templateName]) {
                 elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
                 elem.template = template;
-                codeInput.runOnceWindowLoaded(() => { elem.setup(); }, elem); // So innerHTML can be read
+                codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
+                // Bind sets elem in parameter 
+                // So innerHTML can be read
             }
             console.log(`code-input: template: Added existing elements with template ${templateName}`);
         }
+
         if (codeInput.defaultTemplate == undefined) {
             codeInput.defaultTemplate = templateName;
             // Add elements with default template from queue
             if (undefined in codeInput.templateNotYetRegisteredQueue) {
                 for (let i in codeInput.templateNotYetRegisteredQueue[undefined]) {
                     elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
                     elem.template = template;
-                    codeInput.runOnceWindowLoaded(() => { elem.setup(); }, elem); // So innerHTML can be read
+                    codeInput.runOnceWindowLoaded((function(elem) { elem.connectedCallback(); }).bind(null, elem), elem);
+                    // Bind sets elem in parameter 
+                    // So innerHTML can be read
                 }
             }
             console.log(`code-input: template: Set template ${templateName} as default`);
@@ -471,16 +477,16 @@ var codeInput = {
          * @param {boolean} originalUpdate - Whether this update originates from the textarea's content; if so, run it first so custom updates override it.
          */
         update(value) {
-            if(this.textareaElement == null) {
-                this.addEventListener("code-input_load", () => { this.update(value) }); // Only run when fully loaded
-                return;
-            }
-
             // Prevent this from running multiple times on the same input when "value" attribute is changed, 
             // by not running when value is already equal to the input of this (implying update has already
             // been run). Thank you to peterprvy for this. 
             if (this.ignoreValueUpdate) return;
 
+            if(this.textareaElement == null) {
+                this.addEventListener("code-input_load", () => { this.update(value) }); // Only run when fully loaded
+                return;
+            }
+
             this.ignoreValueUpdate = true;
             this.value = value;
             this.ignoreValueUpdate = false;
@@ -563,6 +569,8 @@ var codeInput = {
          * This will be called once the template has been added.
          */
         setup() {
+            if(this.textareaElement != null) return; // Already set up
+
             this.classList.add("code-input_registered"); // Remove register message
             if (this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
 
@@ -996,13 +1004,19 @@ var codeInput = {
      * has loaded (or now if it has already loaded)
      */
     runOnceWindowLoaded(callback, codeInputElem) {
-        if(codeInputElem.textareaElement != null) {
+        if(codeInput.windowLoaded) {
             callback(); // Fully loaded
         } else {
             window.addEventListener("load", callback);
         }
     },
+    windowLoaded: false
 }
+window.addEventListener("load", function() {
+    codeInput.windowLoaded = true;
+});
+
+
 /**
  * convert wildcards into regex
  */