Make code-input element only be set up when innerHTML written (fixes #176)

Author: WebCoder49

code-input.js

@@ -15,8 +15,8 @@
 
 var codeInput = {
     /**
-     * A list of attributes that will trigger the 
-     * `codeInput.CodeInput.attributeChangedCallback` 
+     * A list of attributes that will trigger the
+     * `codeInput.CodeInput.attributeChangedCallback`
      * when modified in a code-input element. This
      * does not include events, which are handled in
      * `codeInput.CodeInput.addEventListener` and
@@ -133,9 +133,7 @@ var codeInput = {
             for (let i in codeInput.templateNotYetRegisteredQueue[templateName]) {
                 const elem = codeInput.templateNotYetRegisteredQueue[templateName][i];
                 elem.templateObject = template;
-                elem.connectedCallback();
-                // Bind sets elem as first parameter of function 
-                // So innerHTML can be read
+                elem.setup();
             }
         }
 
@@ -146,9 +144,7 @@ var codeInput = {
                 for (let i in codeInput.templateNotYetRegisteredQueue[undefined]) {
                     const elem = codeInput.templateNotYetRegisteredQueue[undefined][i];
                     elem.templateObject = template;
-                    elem.connectedCallback();
-                    // Bind sets elem as first parameter of function
-                    // So innerHTML can be read
+                    elem.setup();
                 }
             }
         }
@@ -611,6 +607,8 @@ var codeInput = {
         setup() {
             if(this.textareaElement != null) return; // Already set up
 
+            this.classList.add("code-input_registered");
+
             this.mutationObserver = new MutationObserver(this.mutationObserverCallback.bind(this));
             this.mutationObserver.observe(this, {
                 attributes: true,
@@ -728,6 +726,8 @@ var codeInput = {
                 this.syncSize();
             });
             resizeObserver.observe(this);
+
+            this.classList.add("code-input_loaded");
         }
 
         /**
@@ -775,9 +775,10 @@ var codeInput = {
             // template property with the string value of the attribute
             this.templateObject = this.getTemplate();
             if (this.templateObject != undefined) {
+                // Template registered before loading
                 this.classList.add("code-input_registered");
-                this.setup();
-                this.classList.add("code-input_loaded");
+                // Children not yet present - wait until they are
+                window.addEventListener("DOMContentLoaded", this.setup.bind(this))
             } 
         }
 

docs/_index.md

@@ -80,6 +80,9 @@ console.log("Hello, World!");</textarea></code-input>
         <script src="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/plugins/indent.min.js"></script>
 
         <!--Register code-input template-->
+        <!--This can be before the code-input element is created, in which case it will defer the registration of all code-input
+        elements until the page is loaded, or after it is created, in which case registration will occur immediately, but not inside
+        code-input elements.-->
         <script>
             codeInput.registerTemplate("syntax-highlighted",
                 new codeInput.templates.Prism(
@@ -137,6 +140,9 @@ console.log("Hello, World!");</textarea></code-input>
         <script src="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/plugins/indent.min.js"></script>
 
         <!--Register code-input template-->
+        <!--This can be before the code-input element is created, in which case it will defer the registration of all code-input
+        elements until the page is loaded, or after it is created, in which case registration will occur immediately, but not inside
+        code-input elements.-->
         <script>
             codeInput.registerTemplate("syntax-highlighted",
                 new codeInput.templates.Hljs(
@@ -182,6 +188,9 @@ console.log("Hello, World!");</textarea></code-input>
         <script src="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/plugins/indent.min.js"></script>
 
         <!--Register code-input template-->
+        <!--This can be before the code-input element is created, in which case it will defer the registration of all code-input
+        elements until the page is loaded, or after it is created, in which case registration will occur immediately, but not inside
+        code-input elements.-->
         <script>
             codeInput.registerTemplate("syntax-highlighted",
                 new codeInput.Template(
@@ -305,4 +314,4 @@ something like [CodeMirror](https://codemirror.net/),
 
 🎉 code-input.js is collaboratively developed by many people, which is what keeps it going strong. By version 2.6.0, many have reported bugs and suggestions, and [9 people (see them on GitHub)](https://github.com/WebCoder49/code-input/graphs/contributors) have contributed code or documentation directly. If you have found a bug, would like to help with the code or documentation, or have additional suggestions, for plugins or core functionality, [please look at GitHub](https://github.com/WebCoder49/code-input/tree/main/CONTRIBUTING.md) or [get in touch via email so I can add it for you](mailto:[email protected])!
 
-*We're looking into mirroring code-input.js onto Codeberg as well as GitHub for more flexibility and freedom - if you have ideas for this please get in touch!*
+*I'm looking into mirroring code-input.js onto Codeberg as well as GitHub for more flexibility and freedom - if you have ideas for this please get in touch!*