Move from polling to transition listeners approach for better performance (styles-removed bug remains)

Author: WebCoder49

code-input.css

@@ -24,7 +24,7 @@ code-input {
    to keep low precedence and thus overridability
    The variables may change and are for internal use. */
   --code-input_highlight-text-color: black; /* Set by JS to be base text color of pre code element */
-  color: var(--code-input_highlight-text-color, black);
+  color: var(--code-input_highlight-text-color, black); /* Variable separate so can be overridden by CSS */
   --code-input_default-caret-color: black; /* Set by JS to be same as color property */
   caret-color: var(--code-input_default-caret-color, black); /* Set by JS to be equal to color property */
   background-color: white;
@@ -73,6 +73,12 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
 code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
   height: max-content;
   width: max-content;
+
+
+  /* Allow colour change to reflect properly;
+  transition-behavior: allow-discrete could be used but this is better supported and
+  works with the color property. */
+  transition: color 0.001s;
 }
 
 code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
@@ -169,6 +175,13 @@ code-input .code-input_dialog-container {
 
   /* Dialog boxes' text is based on text-direction */
   text-align: inherit;
+
+
+  /* Allow colour change to reflect properly;
+  transition-behavior: allow-discrete could be used but this is better supported and
+  works with the color property. */
+  color: inherit;
+  transition: color 0.001s;
 }
 
 [dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {

code-input.js

@@ -506,18 +506,6 @@ var codeInput = {
                 this.needsHighlight = false;
             }
 
-            // Synchronise colors
-            if(this.textareaElement) {
-                let color;
-                if(this.templateObject.preElementStyled) {
-                    color = getComputedStyle(this.preElement).color;
-                } else {
-                    color = getComputedStyle(this.codeElement).color;
-                }
-                this.style.setProperty("--code-input_highlight-text-color", color);
-            }
-            this.style.setProperty("--code-input_default-caret-color", getComputedStyle(this).color);
-
             window.requestAnimationFrame(this.animateFrame.bind(this));
         }
 
@@ -749,7 +737,6 @@ var codeInput = {
             this.codeElement = code;
             pre.append(code);
             this.append(pre);
-
             if (this.templateObject.isCode) {
                 if (lang != undefined && lang != "") {
                     code.classList.add("language-" + lang.toLowerCase());
@@ -788,7 +775,41 @@ var codeInput = {
                 // The only element that could be resized is this code-input element.
                 this.syncSize();
             });
-            resizeObserver.observe(this.textareaElement);
+            resizeObserver.observe(this);
+
+            // Synchronise colors
+            if(this.templateObject.preElementStyled) {
+                this.preElement.addEventListener("transitionend", (evt) => {
+                    if(evt.propertyName == "color") {
+                        // So previous variable value does not affect new value:
+                        // (required to deal with color being no longer specified in CSS)
+                        this.style.removeProperty("--code-input_highlight-text-color");
+
+                        console.log("pre", evt, getComputedStyle(this.preElement).color);
+                        this.style.setProperty("--code-input_highlight-text-color", getComputedStyle(this.preElement).color);
+                    }
+                });
+            } else {
+                this.codeElement.addEventListener("transitionend", (evt) => {
+                    if(evt.propertyName == "color") {
+                        // So previous variable value does not affect new value:
+                        // (required to deal with color being no longer specified in CSS)
+                        this.style.removeProperty("--code-input_highlight-text-color");
+
+                        console.log("code", evt, getComputedStyle(this.codeElement).color);
+                        this.style.setProperty("--code-input_highlight-text-color", getComputedStyle(this.codeElement).color);
+                    }
+                });
+            }
+            // Not on this element so CSS transition property which must be set for
+            // listener to work does not conflict with library-user transition property
+            this.dialogContainerElement.addEventListener("transitionend", (evt) => {
+                if(evt.propertyName == "color") {
+                    console.log("ci", evt, getComputedStyle(this).color);
+
+                    this.style.setProperty("--code-input_default-caret-color", getComputedStyle(this).color);
+                }
+            });
 
             this.classList.add("code-input_loaded");
         }