e111077 · HackerTrans

e111077

no profile record

comments

2 yıl öncediscuss

politics

3 yıl öncediscuss

In terms of low decoupling:

It sometimes makes working with _slotted_ children in a non-lock-in way difficult in terms of state synchronization as opposed to props.children in React. The solution here in an app would be to use a state manager, but it's much more difficult for components that do not want to require the user to use a state manager e.g. design systems.

Additionally, hydration and customElements.define() upgrade order is a different consideration compared to other mono-state frameworks when it comes to SSR.

In terms of state management:

There are plenty of tools out there like lit-mobx shopped by Adobe. The team has also made some examples that show how easy it is to integrate your own state manager into Lit using ReactiveController such as Redux. There is also work being done such as example implementations of Preact Signals integration:

https://github.com/lit/rfcs/blob/preact-signals/rfcs/NNNN-pr...

3 yıl öncediscuss

I worked on adding some of these. We pull them from each of the company's respective brand identity page + some manual SVG cruft elimination to decrease code size.

3 yıl öncediscuss

Yeah, this is not an issue for very well-designed WCs like https://shoelace.style or in cases where it's not necessary like https://modelviewer.dev/

3 yıl öncediscuss

unstyled web components: look into ING Lion Web Components (Lit-based) or @generic-components/components (vanilla)

3 yıl öncediscuss

Likewise with Lit, but that is besides the criticism that he was making earlier

3 yıl öncediscuss

In that case why not just SSR lit on the backend and send that? It sounds like an unfair criticism otherwise

3 yıl öncediscuss

When one writes `import 'lit'` the browser doesn't know where Lit is. This is called a bare module specifier vs an absolute import specifier:

  import '/home/user/project/node_modules/lit/index.js'

A relative specifier:

  import '../node_modules/lit/index.js'

Or a URL Specifier:

  import 'https://unpkg.com/lit?module'

So you have four-ish options to tell the browser where to look for 'lit':

1. Use a server that will use the node module resolution algorithm and transforms it to a relative specifier as it encounters the import (transform/build-ish?)

2. Use experimental "import maps" to go fully buildless to tell the browser where to point that bare module to (buildless)

3. Bundle all your code (build step)

4. Use a bundle from a CDN

Here are some examples of each:

Server that transforms import specifiers (lit.dev does this by default):

https://lit.dev/playground/#gist=9092862a77acf73dd1e6faa73a3... (build-ish)

Import Maps (2):

https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2... (buildless)

https://lit.dev/playground/#gist=91c0b286698612b013eb81881ff... (build-ish)

Url Specifiers (2):

https://lit.dev/playground/#gist=05655736300f0425644e61a6264... (buildless)

https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f... (build-ish)

hope this helps with some of your questions

3 yıl öncediscuss

Web Components are Custom Elements + Shadow DOM, and this makes half of that equation server-side. The other half works as a client-side hydration strategy until they churn out whatever Declarative Custom Elements would look like.

4 yıl öncediscuss

let's be real. nobody is crushing anybody in development speed with webpack. Use rollup esbuild or vite

4 yıl öncediscuss

FWIW preact is 4kb minzipped (+ 700 bytes for htm package templating) while lit-html is 3.3kb minzipped.

Author also talks a lot about the issues with losing control of the component model when using preact

4 yıl öncediscuss

Not sure if you're aware of it, or saying it's missing features, but lit-analyzer adds compile-time linting and type checking while lit-plugin provides IDE integration of the tool

4 yıl öncediscuss

> talks about lit-html which is a fully incompatible replacement for Polymer.

lit-html is completely different from web components and not meant to replace Polymer. lit-html is a library that just handles rendering and lit-element, which is meant to replace polymer uses lit-html as its renderer to make web coponents.

5 yıl öncediscuss

FWIW this is the explanation by the lead on the project:

https://twitter.com/BenDelarre/status/1453038054503944194

TL;DR they're using everything that's on the standards track - just waiting for the others to implement them

5 yıl öncediscuss

HTMLUnknownElement

https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...

5 yıl öncediscuss

I don't think anyone is really targeting JS-less users. It's mostly for faster first renders and the examples of JS-less is to typically show something has been SSR'd and not yet hydrated / not loading anything that isn't needed for first render.

5 yıl öncediscuss

You described a Custom Element a Web Component is a branding phrase for component that uses the four following specs:

* Custom Elements

* Shadow DOM (seems to be optional in practice)

* HTML Template Elements

* ES Modules (formerly HTML Imports)

5 yıl öncediscuss

HTML Imports did exist and was the general authoring idea for web components, but it didn't work exactly as you described and Apple and Mozilla shut it down. Polymer had to release a new version that was JS focused and caused a huge painful migration for users.

5 yıl öncediscuss

I think when they released Catalyst Lit was still in beta

5 yıl öncediscuss

This site tells you which frameworks work well with custom elements. And if they play well with custom elements, then they're usually fine with web components

https://custom-elements-everywhere.com/#preact