Friends and I share a car and sometimes you forget where you have parked it. That's why I've programmed a little web app to help us 😊
Built with: PWABuilder, Lit Web Components, Material Design 3 Components and for the first time also @lit-labs/signals
One thing about web components that seems to take some people a while to grok is that a WC library like Lit is just an implementation detail, and from the outside it's all just standard HTML/DOM.
ie, you don't need to use Lit to instantiate Lit components. Plain DOM APIs work.
#webComponents #lit #webDev #javaScript #js #customElements #buildWithLit #frontend #html #dom #components
Announcing Platformer: a set of libraries to help implement:
• attribute reflection in web components following the HTML specification
• WebIDL type coercions for your public JS APIs (including web component properties)
https://github.com/tbroyer/platformer
Comes with ECMAScript decorators (compatible with TypeScript 5.2+ and Babel) for vanilla custom elements and Lit elements.
Currently not published on NPM (as I'm still evaluating whether all of this is a good thing worth pursuing 😂 feedback welcome!)
⬆️
Updated my post following those tests, as some code samples were wrong and I learned a few new things writing the tests:
https://blog.ltgt.net/web-component-properties/
BTW, also added FAST implementations to the test.
For those interested, I just published on GitHub a series of tests for reflecting attributes in web components (see https://blog.ltgt.net/web-component-properties/ for the rationale, I'll update it soon following those tests), reusing the same tests as used by browsers for built-in elements.
Tests include (for now) vanilla custom elements and Lit custom elements.
Built-in HTML elements' properties all share similar behaviors, that don't come for free when you write your own custom elements. Let's see what those behaviors are, why you'd want to implement them in your web components, and how to do it, including how some web component libraries actually don't allow you to mimic those behaviors.
An experimental web component which can be horizontally swiped to trigger actions.
Based on code by @aerotwist
I've added some new features:
- Uses view-transitions to animate the deletion of items
- Uses pointer-events to unify different input methods
- Is a web component
- Has a "leave behind" indicator for each swipe direction
- It's possible to allow certain swipe directions only
An experimental web component which can be horizontally swiped to trigger actions - GitHub - TonySpegel/swipeable-element: An experimental web component which can be horizontally swiped to trigger ...
@molily @sir_pepe Fwiw, this actually looks a lot like Lit's ReactiveElement: @property and @state-annotated properties become reactive and trigger a call to the update() method where you can update your element the way you want it.
LitElement extends ReactiveElement to render using lit-html, but ReactiveElement can be used standalone.
Btw, ReactiveElement also supports reactive controllers that are slowly spreading to other libraries: https://github.com/webcomponents-cg/community-protocols/issues/27
poke @justinfagnani
Here's a Connect 4 demo with Preact signals and Lit, based on @jaffathecake's one in Preact (https://piaille.fr/@jaffathecake@mastodon.social/110111677805867133). Zero update after the first render. All changes are direct-to-DOM.
Most of the code is copied from Jake's demo; I added a small Lit directive to achieve the direct-to-DOM that's integrated into Preact.
https://lit.dev/playground/#gist=a95902c8db543d453a66839277052502
/poke @justinfagnani
Threw together a simple Connect 4 demo with Preact signals. Zero VDOM updates after the first render. All changes are direct-to-DOM. https://codesandbox.io/s/mutable-haze-fxxts5?file=/src/App.tsx
TonySpegel
🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻♓🧿
Aleš Roubíček
Thomas Broyer
