#buildwithlit — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #buildwithlit, aggregated by home.social.
-
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
-
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!)
-
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.
-
⬆️
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. -
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.
-
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.
-
@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
-
@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
-
It's cool that #Lit is integrating with #Signals.
It feels like we've been circling around this design pattern for decades; they've been called Observables, Pub/Sub, State, Context, etc.
STOKED to hear that there's discussion around standardizing and adding Signals to the #webPlatform!
https://www.youtube.com/live/ri9FEl_hRTc?si=-oztbFGgLG0f9aXJ&t=1636
#webDev #lit #litHTML #litElement #buildWithLit #javaScript #web #react #preact #js #reactjs
-
It's cool that #Lit is integrating with #Signals.
It feels like we've been circling around this design pattern for decades; they've been called Observables, Pub/Sub, State, Context, etc.
STOKED to hear that there's discussion around standardizing and adding Signals to the #webPlatform!
https://www.youtube.com/live/ri9FEl_hRTc?si=-oztbFGgLG0f9aXJ&t=1636
#webDev #lit #litHTML #litElement #buildWithLit #javaScript #web #react #preact #js #reactjs
-
It's super cool that #Lit is supporting standard #javaScript #decorators, but I'm still not going to use them!
Maybe one day when they don't need to be transpiled anymore.
-
It's super cool that #Lit is supporting standard #javaScript #decorators, but I'm still not going to use them!
Maybe one day when they don't need to be transpiled anymore.
-
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
-
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 .... 😖
-
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?
-
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
-
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
-
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:
-
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!
-
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:
-
@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 #SeleniumCheck out the full list of testing solutions:
-
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 #SeleniumCheck 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.
-
#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.
-
It's been a month since I joined #fediverse. Time for a proper #introduction 🙃
I'm Serhii from #Ukraine. Not always online due to #UkraineWar (we had a 30 hours #blackout last week after russian missile strikes).
I've been working at #Vaadin for more than 5 years. My main focus is creating #WebComponents using #javascript, #java and #typescript.
Finally, I'm a member of #OpenWC and #ModernWebDev teams. I also do #opensource on my own and I especially enjoy using #buildWithLit 🔥
-
It's been a month since I joined #fediverse. Time for a proper #introduction 🙃
I'm Serhii from #Ukraine. Not always online due to #UkraineWar (we had a 30 hours #blackout last week after russian missile strikes).
I've been working at #Vaadin for more than 5 years. My main focus is creating #WebComponents using #javascript, #java and #typescript.
Finally, I'm a member of #OpenWC and #ModernWebDev teams. I also do #opensource on my own and I especially enjoy using #buildWithLit 🔥
-
Today we released React wrappers for #Vaadin web components, powered by #buildWithLit Labs React. Check it out: npm i @hilla/react-components
#WebComponents + #react = 😎
-
Today we released React wrappers for #Vaadin web components, powered by #buildWithLit Labs React. Check it out: npm i @hilla/react-components
#WebComponents + #react = 😎
-
#WebComponentsAdvent Day 10: Codelabs.
If you are new to Web Components and don't know where to start, today's update is for you! Check out codelabs: detailed step by step tutorials created by #buildWithLit, Chrome Developers and #OpenWc teams:
-
#WebComponentsAdvent Day 10: Codelabs.
If you are new to Web Components and don't know where to start, today's update is for you! Check out codelabs: detailed step by step tutorials created by #buildWithLit, Chrome Developers and #OpenWc teams:
-
The #BuildWithLit Discord server now has forum channels!
They really look like a much better way to do support, so if you use Lit, head on over and check them out: https://discord.com/invite/buildWithLit
-
The #BuildWithLit Discord server now has forum channels!
They really look like a much better way to do support, so if you use Lit, head on over and check them out: https://discord.com/invite/buildWithLit
-
One component and three ways to compare images:
a slider, an overlay and a split view. Had lots of fun building this 😄 - as always it's @[email protected]
#webcomponents #buildWithLit
https://github.com/TonySpegel/image-comparison🐦🔗: https://twitter.com/TonySpegel/status/1569078471581655040