Writing an Advanced Web Component: Events
So our checkbox component works perfectly, right?
When we click it, the checked state toggles. We can also disable it too. Pretty high-tech stuff!
An interactive element isn’t useful if it’s all appearances though. We want our users to be able to do something with this data. Maybe they want to submit it with a form, or read the data using JavaScript.
If you open the browser’s console and try to access the odyssey-checkbox’s checked value. It returns undefined.
The checked behaviour works visually, all we need to do is expose the state so can access it via JavaScript.
Propagating the checked state
To ensure that a user can access the checked state via JavaScript, we need to do the following:
- register an event listener on the input
- the event liste