@dbroche
Great stuff! Thank you for sharing your approach/opinion. Been using web components awhile now and would love to them embraced by the community. Great share!
@mibreit-photo
Great introduction. This is how I currently use web components. I have a gallery on my homepage and instead of using a mix of JavaScript and selectors in my html, I wrap the images with a web component which internally does all the necessary magic. But there is also the use case for web components to build UI libraries that work with different frameworks. Take Shoelace for example. You can use it in react, angular, vue... It always looks the same and is used the same way. So you get a nearly seamless experience if you work in a larger company that uses different frameworks, yet wants to have the same looking base components.
@etiennedore
As someone learning to code Shopify themes, which use Web Components, this was incredibly insightful! Thank you for sharing your knowledge!
@evilspymace209
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!
@Killyspudful
This is excellent, as ever. Much appreciated.
@Talhaguy
Wow, super eye opening. Thank you! Most examples online show the markup rendered through js, and I completely overlooked that we can simply use html like html was meant to be 😅. I did have a few questions: Whats your approach to avoiding flashes of unstyled content before the js kicks in amd decorates the markup? How do you "bundle" the styles up with the web component? How do you handle not duplicating the view (once in html and then once in the imperitive js code), like of i dynamically wanted to insert an element, like a new todo in a todo list component?
@kodejohan
Very interesting approach!
@TimFegan
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 <button> directly?
@developer4818
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?
@rustyprogrammer
Thanks, very clear :-). I wonder why, in the count component, you inherit from the HTMLElement and not directly from HTMLButtonElement?
@ewinslow822
I heard a lot of "that way if there is no JavaScript" but it is my understanding that there is basically always JavaScript. Why wouldn't there be JavaScript? Is this referring to the initial page load before JavaScript downloads?
@genechristiansomoza4931
I don't use shadow dom. I need the connectedcallback the most in my use cases
@a0um