politics
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…
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.
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/
unstyled web components: look into ING Lion Web Components (Lit-based) or @generic-components/components (vanilla)
Likewise with Lit, but that is besides the criticism that he was making earlier
In that case why not just SSR lit on the backend and send that? It sounds like an unfair criticism otherwise
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:…
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…
let's be real. nobody is crushing anybody in development speed with webpack. Use rollup esbuild or vite
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
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
> 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…
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…
HTMLUnknownElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...
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…
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…
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…
I think when they released Catalyst Lit was still in beta
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
Shadow DOM is crawlable for a few years now
Issues arise when trying to pass objects or add event listeners for custom events due to how React specifically handles this stuff. You often have to use refs
You can get lit-specific advice on their Slack. The link is on their docs site
The Lit team has a labs project called @lit-labs/react that will automatically create a react wrapper: https://www.npmjs.com/package/@lit-labs/react
Heyo, been working with WCs full time as well: 1. Libraries like lit-html have syntax highlighting and tooling to do type checking. For the developer: https://marketplace.visualstudio.com/items?itemName=runem.li... For…
politics
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…
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.
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/
unstyled web components: look into ING Lion Web Components (Lit-based) or @generic-components/components (vanilla)
Likewise with Lit, but that is besides the criticism that he was making earlier
In that case why not just SSR lit on the backend and send that? It sounds like an unfair criticism otherwise
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:…
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…
let's be real. nobody is crushing anybody in development speed with webpack. Use rollup esbuild or vite
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
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
> 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…
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…
HTMLUnknownElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...
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…
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…
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…
I think when they released Catalyst Lit was still in beta
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
Shadow DOM is crawlable for a few years now
Issues arise when trying to pass objects or add event listeners for custom events due to how React specifically handles this stuff. You often have to use refs
You can get lit-specific advice on their Slack. The link is on their docs site
The Lit team has a labs project called @lit-labs/react that will automatically create a react wrapper: https://www.npmjs.com/package/@lit-labs/react
Heyo, been working with WCs full time as well: 1. Libraries like lit-html have syntax highlighting and tooling to do type checking. For the developer: https://marketplace.visualstudio.com/items?itemName=runem.li... For…