e111077

10 ms·

1.
by e111077 2y ago
politics
2.
by e111077 3y ago
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 manag
3.
by e111077 3y ago
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.
4.
by e111077 3y ago
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/
5.
by e111077 3y ago
unstyled web components: look into ING Lion Web Components (Lit-based) or @generic-components/components (vanilla)
6.
by e111077 3y ago
Likewise with Lit, but that is besides the criticism that he was making earlier
7.
by e111077 3y ago
In that case why not just SSR lit on the backend and send that? It sounds like an unfair criticism otherwise
8.
by e111077 4y ago
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/
9.
by e111077 4y ago
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.
10.
by e111077 4y ago
let's be real. nobody is crushing anybody in development speed with webpack. Use rollup esbuild or vite
11.
by e111077 4y ago
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
12.
by e111077 4y ago
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
13.
by e111077 4y ago
> 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
14.
by e111077 5y ago
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 othe
15.
by e111077 5y ago
HTMLUnknownElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...
16.
by e111077 5y ago
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&
17.
by e111077 5y ago
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 Imp
18.
by e111077 5y ago
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 pa
19.
by e111077 5y ago
I think when they released Catalyst Lit was still in beta
20.
by e111077 5y ago
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
21.
by e111077 5y ago
Shadow DOM is crawlable for a few years now
22.
by e111077 5y ago
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
23.
by e111077 5y ago
You can get lit-specific advice on their Slack. The link is on their docs site
24.
by e111077 5y ago
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
25.
by e111077 6y ago
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 node
26.
by e111077 8y ago
I work at Google and can confirm that we are very much pushing web components and Polymer / lit-html.
27.
by e111077 8y ago
This seems to be because you are accessing the DOM of the element from the constructor which is a no no. Here's a simple repro: https://stackblitz.com/edit/lit-element-react-attributes-loc...
28.
by e111077 9y ago
It seems as if you are a bit misguided about Polymer. I recommend that you take a look at a Polymer 2 element instead of a Polymer 1 element: https://www.polymer-project.org/2.0/start/first-element/step... Th
29.
by e111077 10y ago
I think that person is talking about the HTMLElement interface is essentially a JS object and how you can set properties on it. e.g. element.foo = 123; vs element.setAttribute('foo', '123');
30.
by e111077 10y ago
You don't have to use the DOM API for everything as in your example. JSX is very much virtualized template tags which are HTML standard. > This gets progressively worse as your components grow in complexity. Imagine adding a span ar

More ›