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
How I implemented #webmentions rendering on my #weblog? I prototyped it with lit-html #buildWithLit then I reimplemented it as a reusable #webcomponent. More in this blog post: https://www.rarous.net/weblog/2024/02/25/zobrazovani-webmentions-ve-strance.html
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
@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
My base experience with Lit has been OK so far, but integration with #VSCode and #WithAstro seems to be not great -- as code completion for custom properties doesn't seem to work.
The editor treats the web component as just a plain-old component, with nothing custom (and shows warnings about the properties). My searching hasn't provided a way to add extra typing info.
There are an enormous number of moving parts here .... 😖
Anyone here use lit.dev for HTML/web components?
(I don’t know if there’s a hashtag for it)
What’s been your experience? Anything you like better for making the experience of writing a web component just a little nicer with little overhead?
Excited to share a presentation around the ongoing #Vaadin #WebComponents #accessibility project improvements. Do check it out if you are interested in #a11y. There's some groundwork being done and that also gets us closer to
#buildWithLit conversion!
https://docs.google.com/presentation/d/1avZO5MFD5h045C9sxBtj9nuswawMVLJnCaiRlX_TIXU/edit?usp=sharing
@lilPWA I could use some :focus-visible states in the UI. And possibly some focus thrown into the custom context menu. I also wonder if `lit-virtualizer` support custom page sizes... the post content seems to load way after they're on the page.
BUT, it looks pretty nice! Love seeing a #buildWithLit powered Mastodon client. 😍
Always fun to count the apps across Adobe and their myriad frameworks that are able to leverage https://opensource.adobe.com/spectrum-web-components
- proprietary internal ones
- #vuejs
- #buildWithLit
- #react (also, we released our first "public beta" of wrapped elements today 🤫)
- #angular
- #webComponents
- #svelte
- and more!
Can't image it would have been possible if we hadn't chosen #webComponents as the exchange format by which we could support so many consumers. Looking forward to even more in the future! 🚀
Some secrets from the #Vaadin R&D weekly update. Our #designsystem team has been working on really cool stuff lately, including #buildWithLit experiments! Also, do check out eslint-config-vaadin alpha, it's a great #eslint config:
Today has been a good day. Despite russian missile strikes and rolling blackouts, I managed to deliver experimental versions of 5 #Vaadin #WebComponents using #buildWithLit. Don't tell it to my tech lead!
@jyasskin @slightlyoff Here's an example of SSR using #buildWithLit:
New additions to Web Components bookmarks:
- cypress-lit = #Cypress + #buildWithLit 🔥
- query-selector-shadow-dom by #Webdriver
- Shadow DOM support for Capybara 💎
- Shadow DOM with Java #Selenium
Check out the full list of testing solutions:
#WebComponentsAdvent Day 23: Starter Templates.
If you want to start creating #WebComponents, today's update is for you! Meet the list of starters kits with @vite, #buildWithLit, #vue, #svelte, FAST, Shoelace, other libraries and tools.
