i'm guilty for using web components as an alternative to vue. right now i'm rewriting a SPA. i wanted to avoid the excessive tooling and ever changing apis. honestly it's so much more fun!
How to pass callback functions as props to a web component? Specifically, I want to create a form web component that accepts three callback functions as input: 1. `beforeSubmit`: a function to execute before the form is submitted 2. `afterSubmit`: a function to execute after the form is submitted 3. `onSubmit`: a function to execute while the form is being submitted What are the best practices for passing these callback functions as props to the web component?
I'll make a video about this soon, but the high-level is that I would recommend using custom events instead of callbacks for this: gomakethings.com/custom-events-in-web-components/
Thanks for the demo. I'm new to WebComponents but was using React before. These components are very similar and simple. I was wondering why you don't put the event handlers on the directly?
I do, actually! this.btn.addEventListener() is attached directly to the button. I assume you're actually asking why I don't use an onclick event on the button element itself, like . Using addEventListener() lets me use handleEvent() instead of having to rely on Function.bind() or some other trick to get access to "this" in my callback methods, and also makes debugging a bit easier. Using on* methods on elements was an older technique that predates addEventListener(), and React brought it back into popularity for who knows what reason.
@@gomakethings Thanks for the explanation. I liked but all the routing is getting a bit cumbersome. You gave me a great alternative to think about. Thanks.
This comes up a lot! There are two reasons: 1. The Web Component itself isn't a button. One of it's child elements is. If I wanted the custom element itself to behave like a button, I'd also need to add stuff like a `role` attribute and additional event listeners. 2. That's also unfortunately not how Web Components work. You extend the HTMLElement, then layer in your custom behavior. You can't reliably extend other element types with customElements.define(). There was a spec in the works that would let you extend native elements with custom functionality using `is` attribute. Firefox and Chromium moved forward with it, and then the WebKit team straight up refused to implement it, effectively killing the spec. developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is My understanding is that there's a replacement spec in the works that WebKit is allegedly onboard with, but I don't know much about it at this time as it's nowhere near production ready.
i'm guilty for using web components as an alternative to vue. right now i'm rewriting a SPA. i wanted to avoid the excessive tooling and ever changing apis. honestly it's so much more fun!
This is excellent, as ever. Much appreciated.
Thanks so much, friend!
Very interesting approach!
Thanks!
How to pass callback functions as props to a web component?
Specifically, I want to create a form web component that accepts three callback functions as input:
1. `beforeSubmit`: a function to execute before the form is submitted
2. `afterSubmit`: a function to execute after the form is submitted
3. `onSubmit`: a function to execute while the form is being submitted
What are the best practices for passing these callback functions as props to the web component?
I'll make a video about this soon, but the high-level is that I would recommend using custom events instead of callbacks for this: gomakethings.com/custom-events-in-web-components/
Thanks for the demo. I'm new to WebComponents but was using React before. These components are very similar and simple. I was wondering why you don't put the event handlers on the directly?
I do, actually! this.btn.addEventListener() is attached directly to the button.
I assume you're actually asking why I don't use an onclick event on the button element itself, like .
Using addEventListener() lets me use handleEvent() instead of having to rely on Function.bind() or some other trick to get access to "this" in my callback methods, and also makes debugging a bit easier.
Using on* methods on elements was an older technique that predates addEventListener(), and React brought it back into popularity for who knows what reason.
@@gomakethings Thanks for the explanation. I liked but all the routing is getting a bit cumbersome. You gave me a great alternative to think about. Thanks.
Thanks, very clear :-). I wonder why, in the count component, you inherit from the HTMLElement and not directly from HTMLButtonElement?
This comes up a lot! There are two reasons:
1. The Web Component itself isn't a button. One of it's child elements is. If I wanted the custom element itself to behave like a button, I'd also need to add stuff like a `role` attribute and additional event listeners.
2. That's also unfortunately not how Web Components work. You extend the HTMLElement, then layer in your custom behavior. You can't reliably extend other element types with customElements.define().
There was a spec in the works that would let you extend native elements with custom functionality using `is` attribute. Firefox and Chromium moved forward with it, and then the WebKit team straight up refused to implement it, effectively killing the spec.
developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is
My understanding is that there's a replacement spec in the works that WebKit is allegedly onboard with, but I don't know much about it at this time as it's nowhere near production ready.