If Web Components are so great, why am I not using them?

Post by dannye » Fri, Aug 04, 2023, 3:11 PM UTC

benatkin wrote: post #26

herpdyderp wrote: post #23

I've been using web components now for years and I will do everything I can to never write frontends in anything else. I totally agree with point 2 though: the Polymer phase was very weird, but, as mentioned, https://lit.dev is great and, imo, the perfect abstraction.

Lit seems functionally equivalent to Svelte. Might Lit only be better if you have a preference towards declaring classes? Perhaps tracing back to Backbone or React before hooks? Svelte supports custom elements: https://svelte.dev/docs/custom-elements-api

Post by kerkeslager » Sat, Aug 05, 2023, 3:39 PM UTC

LorenzA wrote: post #174

kerkeslager wrote: post #169

Earlier quoted context omitted.

> Most of the time you have the tab and the panel to display the content of the tab a super simple demo implementation of something like this https://web.dev/components-howto-tabs/ That's exactly what I'm saying is bad. Why does the user of the howto-tabs have to type "slot='panel'" when that information is already communicated by the fact that it's a "howto-panel" inside a "howto-tabs"? This is a useless leaking of…

you can just have an unnamed slot. I'm probably missing something here haven't build a tabs thing in a long time. But just trying this out for a couple of minutes the thing you want seems to be possible. I didn't do any styling here and the code is just something I hacked down to test it. Where hn-tabs is your tab-area and hn-tab your tab- class HnTabs extends HTMLElement { constructor() { super(); this._tabs = {} th…

Post by yCombLinks » Sat, Aug 05, 2023, 5:41 PM UTC

mock-possum wrote: post #173

yCombLinks wrote: post #49

Web components don't solve any of the problems day-to-day devs ACTUALLY care about.

Encapsulation and ease of reusability / configuration? Just as an example - a widget to manage a list of number ranges. Build it up like a form element - it provides a value prop with the type ‘[number,number][]’ You need to display the current collection of min/max pairs, and add / remove / edit the collection - it’s essentially a mini CRUD component. There is no default html element that provides this functionality…

Post by kerkeslager » Mon, Aug 07, 2023, 2:53 AM UTC

LorenzA wrote: post #184

kerkeslager wrote: post #183

Earlier quoted context omitted.

When I have some time I'll play around with this: I'm certainly open to the idea that there's some stuff I don't know about slots. But I have a question: When you append the slot to the shadow root, doesn't that mean that you lose styling in the slot contents?

no things inside slots keep the styling from the outside

Post by btreecat » Wed, Aug 16, 2023, 2:48 AM UTC

WorldMaker wrote: post #168

btreecat wrote: post #18

Earlier quoted context omitted.

I thought so too, and tried to dig into the specifics. I ended up here: https://hacks.mozilla.org/2014/12/mozilla-and-web-components... And left very unsatisfied that this is the current answer, only because I'd like to better understand how the use of JS modules over time has played out wrt html imports.

Things like HTML (and JSON) imports in ES modules, among other things, have been waiting on some safety signalling mechanics currently named "Import Attributes". Import Attributes are currently in Stage 3 [0]. The basic security story is that browsers never care about file extensions, they care about MIME types. A developer might add an import to a third-party HTML or JSON file somewhere and expect one "safe" behavio…