Change code-input-fallback attribute to data-code-input-fallback for more predictable behaviour; allow value property to be set before registration

Author: WebCoder49

code-input.css

@@ -94,7 +94,7 @@ code-input textarea, code-input pre {
 
 /* Move the textarea in front of the result */
 
-code-input textarea:not([code-input-fallback]) {
+code-input textarea:not([data-code-input-fallback]) {
   z-index: 1;
 }
 code-input pre {
@@ -103,7 +103,7 @@ code-input pre {
 
 /* Make textarea almost completely transparent, except for caret and placeholder */
 
-code-input textarea:not([code-input-fallback]) {
+code-input textarea:not([data-code-input-fallback]) {
   color: transparent;
   background: transparent;
   caret-color: inherit!important; /* Or choose your favourite color */
@@ -161,7 +161,7 @@ code-input:not(.code-input_registered) textarea {
   min-height: calc(100% - var(--padding, 16px) * 2 - 2em);
 }
 
-code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea:not([code-input-fallback]) {
+code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea:not([data-code-input-fallback]) {
   opacity: 0;
 }
 
@@ -218,26 +218,26 @@ code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-n
   right: 0;
 }
 
-code-input:not(:has(textarea:not([code-input-fallback]):focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
+code-input:not(:has(textarea:not([data-code-input-fallback]):focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
 code-input.code-input_mouse-focused .code-input_dialog-container .code-input_keyboard-navigation-instructions,
 code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions:empty {
   /* When not keyboard-focused / no instructions don't show instructions */
   display: none;
 }
 
 /* Things with padding when instructions are present */
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused) textarea,
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) textarea,
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
   padding-top: calc(var(--padding, 16px) + 3em)!important;
 }
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused) textarea, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) textarea, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
   min-height: calc(100% - var(--padding, 16px) * 2 - 3em);
 }
 
 /* No JavaScript fallback - styles to override all previous */
 
-code-input textarea[code-input-fallback] {
+code-input textarea[data-code-input-fallback] {
   overflow: auto;
   background-color: inherit;
   color: inherit;

code-input.js

@@ -622,7 +622,7 @@ var codeInput = {
 
             this.pluginEvt("beforeElementsAdded");
 
-            const fallbackTextarea = this.querySelector("textarea[code-input-fallback]");
+            const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
             let value;
             if(fallbackTextarea) {
                 // Fallback textarea exists
@@ -966,8 +966,18 @@ var codeInput = {
          * Get the text contents of the code-input element.
          */
         get value() {
-            // Get from editable textarea element
-            return this.textareaElement.value;
+            if(this.textareaElement) {
+                // Get from editable textarea element
+                return this.textareaElement.value;
+            } else {
+                // Unregistered
+                const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                if(fallbackTextarea) {
+                    return fallbackTextarea.value;
+                } else {
+                    return this.innerHTML;
+                }
+            }
         }
         /**
          * Set the text contents of the code-input element.
@@ -977,13 +987,20 @@ var codeInput = {
             if (val === null || val === undefined) {
                 val = "";
             }
-
-            // Save in editable textarea element
-            this.textareaElement.value = val;
-            // Trigger highlight
-            this.scheduleHighlight();
-
-            return val;
+            if(this.textareaElement) {
+                // Save in editable textarea element
+                this.textareaElement.value = val;
+                // Trigger highlight
+                this.scheduleHighlight();
+            } else {
+                // Unregistered
+                const fallbackTextarea = this.querySelector("textarea[data-code-input-fallback]");
+                if(fallbackTextarea) {
+                    fallbackTextarea.value = val;
+                } else {
+                    this.innerHTML = val;
+                }
+            }
         }
 
         // Synchronise blur and focus

code-input.min.css

@@ -11,7 +11,7 @@ title = '`code-input` in HTML5 Forms'
 This is a good time to make use of the fallback textarea which is used when JavaScript is disabled; the following code will send data to the HTML5 form correctly whether or not JavaScript is enabled:
 ```html
 <form>
-    <code-input><textarea code-input-fallback name="code"></textarea></code-input>
+    <code-input><textarea data-code-input-fallback name="code"></textarea></code-input>
     <input type="submit"/>
 </form>
 ```

docs/interface/forms/_index.md

@@ -42,7 +42,7 @@ <h4><a href="prism.html">Test for Prism.js</a></h4>
 
     <details id="collapse-results"><summary>Test Results (Click to Open)</summary><pre id="test-results"></pre></details>
     <form method="GET" action="https://google.com/search" target="_blank">
-        <code-input><textarea code-input-fallback name="q">console.log("Hello, World!");
+        <code-input><textarea data-code-input-fallback name="q">console.log("Hello, World!");
 // A second line
 // A third line with &lt;html> tags</textarea></code-input>
         <input type="submit" value="Search Google For Code"/>