Skip to content

Commit da8d444

Browse files
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>
1 parent 95bb340 commit da8d444

File tree

2 files changed

+20
-16
lines changed

2 files changed

+20
-16
lines changed

README.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,16 @@ class CustomErrorHandleElement extends ErrorHandlingElement {
1717
connectedCallback() {
1818
super.connectedCallback()
1919

20-
this.form.addEventListener(`submit`, (event) => {
21-
if(!event.defaultPrevented){
22-
event.preventDefault()
23-
clearErrorListsInForm(this.form)
24-
console.debug(event)
25-
document.getElementById(`easy-console`).value += "Submit successful\n"
26-
}
27-
})
20+
this.form.addEventListener(`submit`, this.handleFormSubmit)
21+
}
22+
23+
handleFormSubmit(event){
24+
if(!event.defaultPrevented){
25+
event.preventDefault()
26+
clearErrorListsInForm(this.form)
27+
console.debug(event)
28+
document.getElementById(`easy-console`).value += "Submit successful\n"
29+
}
2830
}
2931
}
3032

demo/index.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,16 @@
1616
connectedCallback() {
1717
super.connectedCallback()
1818

19-
this.form.addEventListener(`submit`, (event) => {
20-
if(!event.defaultPrevented){
21-
event.preventDefault()
22-
clearErrorListsInForm(this.form)
23-
console.debug(event)
24-
document.getElementById(`easy-console`).value += "Submit successful\n"
25-
}
26-
})
19+
this.form.addEventListener(`submit`, this.handleFormSubmit)
20+
}
21+
22+
handleFormSubmit(event){
23+
if(!event.defaultPrevented){
24+
event.preventDefault()
25+
clearErrorListsInForm(this.form)
26+
console.debug(event)
27+
document.getElementById(`easy-console`).value += "Submit successful\n"
28+
}
2729
}
2830
}
2931

0 commit comments

Comments
 (0)