Question about web components
I'm working on a project that will require being able to add a bunch of different components to the page at any given time so the plan is to try to use web components. I'm having a debate with my coworker, however, on the best way to set them up and hoping anyone might know the pros or cons of one way compared to the other.
My argument is that everything should be built inside a singular class constructor with all the logic built into it. So something like an accordion would look like this and the class would loop through each details tag to set up all the logic needed
My coworker thinks it should be broken up into multiple class constructors so each unique function is separated from the whole. Something like this so each part has it's own logic and then a "master" class on the accordion-list that pulls in all the other parts
The second way just seems like way too much bloat and a pain to make sure every thing can talk to each other.
Does this come down to a personal preference thing or is there legitimate benefits for one way or the other?
3 Replies
If the only purpose of this example is building an accordion section where opening one bit closes the rest, of course you don't need to wrap every element in its own web component, let alone two separate components for
accordion-group and accordion-list. If that were really your colleague's code, that would be ridiculous, but to be frank, it reads like a strawman, which obscures a valid question. It really depends what functionality you're actually adding.
Like, if you're talking about wrapping the whole page in one singular web component with a bunch of different functions for manipulating different unrelated elements, for example, that would be equally ridiculous, you'd negate the point of using web components and you might as well just use traditional js dom manipulation.
If you're asking "what should be its own web component", the answer is, any component which may be used independently. You shouldn't ever be using summary except in the context of details, so any functionality you're adding to summary should be baked into a special-details web component. But if you're adding some functionality to a details element that might be used separate to the context of an accordion list, for example, then yeah, that should probably be its own component.Thanks Alex. It's not meant to be a straw man because I am legitimately wondering if I am missing something with why my coworker wants to split up every single thing to it's own web component but it does seem ridiculous to me. Another example is that he wants every possible function that a button can do to be within a button component and I have been trying to convince him that the button should go within a larger web component that has the functionality only for that specific component.
This is maybe more advice about collaborative working than web development, but I think a useful exercise for you and your colleague might be sharing some examples of existing approaches for building web components and discussing their pros/cons in relation to your project — see if you can work out what his inspirations are. Like, there's a version of what your colleague is describing which isn't too dissimilar to this example from the 11ty dev:
https://www.zachleat.com/web/details-utils/
Zach Leatherman
Add Responsive-Friendly Enhancements to
details with `details-uti...A post by Zach Leatherman (zachleat)