Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Lit: a library for building fast, lightweight web components

lit.dev

Post reply on HN
Print view View original

111–120 of 180 posts

Re: Lit: a library for building fast, lightweight web components

#111

Post by brazukadev »

Ruphin wrote: post #110
brazukadev wrote: post #67

Earlier quoted context omitted.

> - Open styleable shadow roots What people using web components want is to get rid of shadowDOM and not feel like they are deviating from the correct path. shadowDOM sucks, stop trying to convince the world that we are using it wrong. shadowDOM is the whole reason web components did not become mainstream (yet?).

Nothing in Web Components is forcing you to use ShadowDOM. Lit also allows you to make components without ShadowDOM if you prefer, because there are certainly cases where it can be necessary to do so (like for ARIA reference id-matching). For full single application development, it can feel like it gets in the way a lot, and you can make a good argument to use components without ShadowDOM in those contexts too. All f…

> Nothing in Web Components is forcing you to use ShadowDOM

Yes. There is just one thing forcing someone to use shadowDOM: slots. You can't use slots without shadowDOM or at least use something like this.children to capture the content inside the .

But that is quite the important feature lacking.

Re: Lit: a library for building fast, lightweight web components

#112

Post by azangru »

troupo wrote: post #78
kubb wrote: post #35

Earlier quoted context omitted.

No shadow DOM, no web components, no template strings, etc.

> No shadow DOM Funny you should say that when the current advise for web components is to avoid Shadow DOM (almost like the plague) > no web components As in? > no template strings Why would React need template strings? React is not the only framework that doesn't use template strings for anything (Vue, Solid, Svelte come immediately to mind). And it's hard to accuse those of being behind the times when Solid is lit…

> the current advise for web components is to avoid Shadow DOM (almost like the plague)

Could you provide the source for this advice?

Re: Lit: a library for building fast, lightweight web components

#113

Post by alexisread »

Ruphin wrote: post #106
alexisread wrote: post #102

Earlier quoted context omitted.

Thought I'd add an example: https://github.com/SaleCar/Quasar-UMD-Template You can do sophisticated things as well eg. Stream half a million Kafka records into the browser- anything available from unpkg or other cdns. A good cdn UI lib turns out to be https://quasar.dev/

Oh nice, I wasn't aware this was even possible. Vue _does_ have some sort of build step, because components use special macros that aren't imported, and the compiler (vite) even complains when you actually import them saying it's not necessary. The build also rewrites your code to some other format that I assume is more optimized because it can do some sort of static analysis. Are these the main reasons for Vue to us…

It's a combination of things.

Adding polyfills for older browser targets.

Tree shaking, that is removing code that is not used.

Bundling several files into one to save on requests.

Transpiling, that is, if you want to write code in a different language to javascript eg. Typescript then vite will compile that to javascript.

Linting ie. Reformatting your code to standardise it across developers.

Vulnerability checking, are your dependencies out of date?

Execution of build tasks eg. Preparing static assets like images.

Packaging your app for deployment eg. Zipping

Including logging and hot reload triggers during development.

Bundling environment specific changes eg. Different backend urls if deploying to test envs.

Running unit tests on rebuild to avoid regressions.

Having said all that, the bundling for me is a disadvantage as my own code changes more than 3rd party libs and they are cached. I'm less fussed with types and a lot of the tests and env stuff can be done with a single-file express server for development.

The main advantage for me is that a buildless app will still work correctly in 6 months- permacomputing considerations.

Re: Lit: a library for building fast, lightweight web components

#114

Post by no_wizard »

brazukadev wrote: post #111
Ruphin wrote: post #110

Earlier quoted context omitted.

Nothing in Web Components is forcing you to use ShadowDOM. Lit also allows you to make components without ShadowDOM if you prefer, because there are certainly cases where it can be necessary to do so (like for ARIA reference id-matching). For full single application development, it can feel like it gets in the way a lot, and you can make a good argument to use components without ShadowDOM in those contexts too. All f…

> Nothing in Web Components is forcing you to use ShadowDOM Yes. There is just one thing forcing someone to use shadowDOM: slots. You can't use slots without shadowDOM or at least use something like this.children to capture the content inside the . But that is quite the important feature lacking.

In my mind this has always made no sense to me, why slots aren’t independent of the shadow dom.

Same thing with how css is handled, especially since we have @layer and @scoped now

Re: Lit: a library for building fast, lightweight web components

#115

Post by megaman821 »

whs wrote: post #83

Does Lit have a good component library? Like, a complete web template (eg. Bootstrap/Ant), datepicker, color picker, virtual scroll, data tables, typeahead, tab, etc. I shipped a project with Lit and I liked it, but I didn't like that I'd need to know the complete project scope up front that I could write everything from the ground up. I know I could use React component for some of the harder stuff but at that point…

Yes, take a look at https://webawesome.com/

Re: Lit: a library for building fast, lightweight web components

#116

Post by jcbrand »

I used Lit components in a large FE project, enjoyed doing so and am happy with my choice. I don't use the shadow DOM at all.

The project is Converse.js, an XMPP chat client. It's an old project that was originally created back in 2013 with Backbone.js.

I first replaced all templates with `lit-html` when I first heard about that, and then when lit-element (and now "lit") came out, I started rewriting the project to use that.

This app has since been integrated into many different websites that rely on other frameworks like React and the fact that Converse.js is a web component () makes this easier.

If you're interested, here's the Github repo: https://github.com/conversejs/converse.js And you can demo it here: https://chat.conversejs.org/

You'll need an XMPP account (see https://providers.xmpp.net/ for possible providers).

Re: Lit: a library for building fast, lightweight web components

#117

Post by jazzypants »

kubb wrote: post #89
Muromec wrote: post #41

I had lit in a project at work and not having to deal with it anymore is just great. We already have another heavier component framework to do the actual application stuff anyway, so having two just because somebody wanted to optimize their resume was such a drag. It all looked nice in theory, but one thing shadow DOM makes worse is A11y, because element ids are now scoped and all the missing describe-by, label-for f…

Shadow DOM is optional in Lit - you can just disable it on a per-component basis.

It should not be the default. This is almost certainly Lit's biggest flaw.

I am currently working on a web components framework, and I scrapped everything halfway through after I realized that you very rarely want that much encapsulation. Now, you can turn it on if you really need it, and I even made a way where you can pass references to DOM elements and stylesheets and such into each component so you can pierce the shadow veil easily. I have one demo to show it off, but I'm really having trouble imagining when someone would actually want to use it. The only time I can imagine it being useful would be building component libraries inside of large organizations.

I'm not ready to show off my framework yet, but I'm very certain that this leads to a better DX.

Re: Lit: a library for building fast, lightweight web components

#118

Post by CharlieDigital »

shoeb00m wrote: post #82
CharlieDigital wrote: post #61

Earlier quoted context omitted.

Also Reddit! Any other surprise sites?

I think lit is great but the reddit site is the perfect example of why the framework you chose is not the reason your site is slow. I think lit should distance itself from that mess if possible

Site seems fine to me on mobile and desktop (only use the web app in Firefox). Their main issues are with data fetching, not rendering.

Re: Lit: a library for building fast, lightweight web components

#119

Post by kubb »

sauercrowd wrote: post #109
kubb wrote: post #89

Earlier quoted context omitted.

Shadow DOM is optional in Lit - you can just disable it on a per-component basis.

causes a bunch of things to no longer work though - slots, style encapsulation, ...

If you need style encapsulation, use the Shadow DOM. Slots still work IIRC.

Re: Lit: a library for building fast, lightweight web components

#120

Post by kubb »

jazzypants wrote: post #117
kubb wrote: post #89

Earlier quoted context omitted.

Shadow DOM is optional in Lit - you can just disable it on a per-component basis.

It should not be the default. This is almost certainly Lit's biggest flaw. I am currently working on a web components framework, and I scrapped everything halfway through after I realized that you very rarely want that much encapsulation. Now, you can turn it on if you really need it, and I even made a way where you can pass references to DOM elements and stylesheets and such into each component so you can pierce the…

Good luck with your better framework, but if this is the biggest flaw… then there’s really not much to complain about.
Post reply on HN