Polish example custom element to use referenceable function

* Good practice, since `connectedCallback` can be run multiple times;
	referenceable functions provides automatic deduping and helps avoid
	people pulling their hair out

Co-authored-by: Konnor Rogers <konnor5456@gmail.com>

Author: tcannonfodder

README.md

@@ -17,14 +17,16 @@ class CustomErrorHandleElement extends ErrorHandlingElement {
   connectedCallback() {
     super.connectedCallback()
 
-    this.form.addEventListener(`submit`, (event) => {
-      if(!event.defaultPrevented){
-        event.preventDefault()
-        clearErrorListsInForm(this.form)
-        console.debug(event)
-        document.getElementById(`easy-console`).value += "Submit successful\n"
-      }
-    })
+    this.form.addEventListener(`submit`, this.handleFormSubmit)
+  }
+
+  handleFormSubmit(event){
+    if(!event.defaultPrevented){
+      event.preventDefault()
+      clearErrorListsInForm(this.form)
+      console.debug(event)
+      document.getElementById(`easy-console`).value += "Submit successful\n"
+    }
   }
 }
 

demo/index.html

@@ -16,14 +16,16 @@
       connectedCallback() {
         super.connectedCallback()
 
-        this.form.addEventListener(`submit`, (event) => {
-          if(!event.defaultPrevented){
-            event.preventDefault()
-            clearErrorListsInForm(this.form)
-            console.debug(event)
-            document.getElementById(`easy-console`).value += "Submit successful\n"
-          }
-        })
+        this.form.addEventListener(`submit`, this.handleFormSubmit)
+      }
+
+      handleFormSubmit(event){
+        if(!event.defaultPrevented){
+          event.preventDefault()
+          clearErrorListsInForm(this.form)
+          console.debug(event)
+          document.getElementById(`easy-console`).value += "Submit successful\n"
+        }
       }
     }