I have created a monster… behold! 🔥👹
Lit Web Components library + RequireJS / AMD modules, running in a plain .html + classic non-module .js on local file:// URL 🫣 0% build, 0% server, vegan & gluten-free 🚫 #javascript
Lit Web Components library + RequireJS / AMD modules, running in a plain .html + classic non-module .js on local file:// URL 🫣 0% build, 0% server, vegan & gluten-free 🚫 #javascript
![<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.7/require.min.js"></script>
<script type="module">
import { LitElement, html } from 'https://unpkg.com/lit@3.3.0/index.js?module';
define('lit', [], function() {
return {
LitElement: LitElement,
html: html
};
});
</script>
<script defer src="test_element.js"></script>
<my-component />](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:oio4hkxaop4ao4wz2pp3f4cr/bafkreifxwigxbahxjurvg3qox7i7tpo4t3lhwukwm3x2vnwotsbkdl3mti)
![require(['lit'], function(lit) {
let { LitElement, html } = lit;
class MyComponent extends LitElement {
static properties = {
name: { type: String }
};
constructor() {
super();
this.name = 'World';
}
createRenderRoot() {
return this;
}
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
customElements.define('my-component', MyComponent);
});](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:oio4hkxaop4ao4wz2pp3f4cr/bafkreibytjyhzr64zpguozvdzaegjkptvp47nyigliysamim2yzyefj7hq)
May 31, 2025 at 10:54 PM
I have created a monster… behold! 🔥👹
Lit Web Components library + RequireJS / AMD modules, running in a plain .html + classic non-module .js on local file:// URL 🫣 0% build, 0% server, vegan & gluten-free 🚫 #javascript
Lit Web Components library + RequireJS / AMD modules, running in a plain .html + classic non-module .js on local file:// URL 🫣 0% build, 0% server, vegan & gluten-free 🚫 #javascript
So here's my WASM X-language component idea:
You have a WASM module that exports a list of public properties and render() function that accepts data and returns a lit-html TemplateResult-like thing. You tie that into LitElement to render.
Then you can SSR that component in any server language!
You have a WASM module that exports a list of public properties and render() function that accepts data and returns a lit-html TemplateResult-like thing. You tie that into LitElement to render.
Then you can SSR that component in any server language!
February 18, 2026 at 12:26 AM
So here's my WASM X-language component idea:
You have a WASM module that exports a list of public properties and render() function that accepts data and returns a lit-html TemplateResult-like thing. You tie that into LitElement to render.
Then you can SSR that component in any server language!
You have a WASM module that exports a list of public properties and render() function that accepts data and returns a lit-html TemplateResult-like thing. You tie that into LitElement to render.
Then you can SSR that component in any server language!
Recreate a Cool Shuffling Effect in Pure CSS
I was on Learn with Jason the other day! Jason and I go way back and it was a dang pleasure getting to hang out with him to chat and build a thing together. We made a light-DOM-y LitElement photo shuffle machine thingy. Mega high five to Toni Lijic…
I was on Learn with Jason the other day! Jason and I go way back and it was a dang pleasure getting to hang out with him to chat and build a thing together. We made a light-DOM-y LitElement photo shuffle machine thingy. Mega high five to Toni Lijic…
Recreate a Cool Shuffling Effect in Pure CSS
I was on Learn with Jason the other day! Jason and I go way back and it was a dang pleasure getting to hang out with him to chat and build a thing together. We made a light-DOM-y LitElement photo shuffle machine thingy. Mega high five to Toni Lijic where I swiped the whole idea and design of the widget from.
chriscoyier.net
January 6, 2025 at 3:58 PM
Recreate a Cool Shuffling Effect in Pure CSS
I was on Learn with Jason the other day! Jason and I go way back and it was a dang pleasure getting to hang out with him to chat and build a thing together. We made a light-DOM-y LitElement photo shuffle machine thingy. Mega high five to Toni Lijic…
I was on Learn with Jason the other day! Jason and I go way back and it was a dang pleasure getting to hang out with him to chat and build a thing together. We made a light-DOM-y LitElement photo shuffle machine thingy. Mega high five to Toni Lijic…
Interesting. Here's a whole non-web-components framework that only uses lit-html, not LitElement.
It basically has a little React in there with template literals and template rendering instead of JSX and vdom.
It basically has a little React in there with template literals and template rendering instead of JSX and vdom.
I'm trying to beef up my frontend knowledge (non-existant). So naturally, I had to write yet another component library. But not for React, or Svelte, or Solid. No, daddy likes Lit.
(ymmv, there be dragons, IANAFD, v0.1.2)
minilit.mariozechner.at
(ymmv, there be dragons, IANAFD, v0.1.2)
minilit.mariozechner.at
mini-lit
Lightweight Lit components with shadcn-inspired theming, Tailwind CSS v4 styling, and Lucide icons.
minilit.mariozechner.at
September 24, 2025 at 2:30 PM
Interesting. Here's a whole non-web-components framework that only uses lit-html, not LitElement.
It basically has a little React in there with template literals and template rendering instead of JSX and vdom.
It basically has a little React in there with template literals and template rendering instead of JSX and vdom.
Spent too much of today reading the React-Aria-Headless source code. Have come to one conclusion:
#webcomponents #litelement
#webcomponents #litelement
July 9, 2025 at 11:02 PM
Spent too much of today reading the React-Aria-Headless source code. Have come to one conclusion:
#webcomponents #litelement
#webcomponents #litelement
Talking over some terrible things with my good friend Chad G.
May 31, 2025 at 2:14 PM
Talking over some terrible things with my good friend Chad G.
Hmm. I have detected a new Web Component idiom for LitElement: the homogenous autoslotted collection component. I need to think about if there's a common base class I can make work for it.
July 28, 2026 at 10:45 PM
Hmm. I have detected a new Web Component idiom for LitElement: the homogenous autoslotted collection component. I need to think about if there's a common base class I can make work for it.
Despite my complaint about my brain, I've actually been accomplishing a lot of code this afternoon. I'm working on a project called lit-lace, which is a graphical AST editor for LitElement based on a close read of the live object drag-and-drop architecture from Svelte.
Still not thinking straight. Can't tell if it's jetlag, lack of adderall, or something else, but man, is it harder to concentrate than usual. The worst part is knowing I have at least two more days until I shake off all the jetlag, and the day after that I get on a plane to go nine zones back.
May 27, 2026 at 4:48 PM
Despite my complaint about my brain, I've actually been accomplishing a lot of code this afternoon. I'm working on a project called lit-lace, which is a graphical AST editor for LitElement based on a close read of the live object drag-and-drop architecture from Svelte.
Lit-html itself doesn’t require using web components
But most usage probably comes from LitElement indeed :)
But most usage probably comes from LitElement indeed :)
November 22, 2024 at 7:41 PM
Lit-html itself doesn’t require using web components
But most usage probably comes from LitElement indeed :)
But most usage probably comes from LitElement indeed :)
Today I learned that, in LitElement, when Typescript tells you something "is not compatible with TemplateResult<1>", the `<1>` part there just mean "HTML." A 2 would be SVG, and 3 is MathML. ... and that's it.
December 27, 2025 at 12:56 AM
Today I learned that, in LitElement, when Typescript tells you something "is not compatible with TemplateResult<1>", the `<1>` part there just mean "HTML." A 2 would be SVG, and 3 is MathML. ... and that's it.
Lit's also just an extension to HTMLElement, so every new feature HTMLElement gets, LitElement automatically gets without any code changes. I think this future-proofs Lit-based WCs in a way we haven't seen before.
October 21, 2025 at 9:05 PM
Lit's also just an extension to HTMLElement, so every new feature HTMLElement gets, LitElement automatically gets without any code changes. I think this future-proofs Lit-based WCs in a way we haven't seen before.
So if I extend LITElement, am I using it "from the outside"?
December 22, 2025 at 7:17 PM
So if I extend LITElement, am I using it "from the outside"?
What's interesting to me is how thin these framework layers are getting. LitElement, for example, mainly just implements batched rendering. Enhance also looks simple. The framework is starting to matter less, because you can get to ergonomic app dev using mostly just platform features.
October 25, 2025 at 10:02 AM
What's interesting to me is how thin these framework layers are getting. LitElement, for example, mainly just implements batched rendering. Enhance also looks simple. The framework is starting to matter less, because you can get to ergonomic app dev using mostly just platform features.
@tjcrowdertech sometime #litelement. Lots of times #webcomponents and know it will find the right people…
What have you been making?
What have you been making?
December 29, 2024 at 6:20 PM
@tjcrowdertech sometime #litelement. Lots of times #webcomponents and know it will find the right people…
What have you been making?
What have you been making?
Is anyone aware of a Web Component abstraction for queuing updates, similar to LitElement? The API for this is great in Lit, but Lit brings in a bunch of other stuff that I don't want.
To be clear, I'm looking for the stuff like firstUpdated, update, updated, etc.
To be clear, I'm looking for the stuff like firstUpdated, update, updated, etc.
December 17, 2024 at 1:22 AM
Is anyone aware of a Web Component abstraction for queuing updates, similar to LitElement? The API for this is great in Lit, but Lit brings in a bunch of other stuff that I don't want.
To be clear, I'm looking for the stuff like firstUpdated, update, updated, etc.
To be clear, I'm looking for the stuff like firstUpdated, update, updated, etc.
All of these techniques work well with #LitElement, but they're perfectly serviceable in any #WebComponent context. Use them with Svelte or Fast!
May 1, 2024 at 7:23 PM
All of these techniques work well with #LitElement, but they're perfectly serviceable in any #WebComponent context. Use them with Svelte or Fast!
Hace un mes hice un tres en raya con LitElement que incluía un modo de un jugador en el que la app marcaba una casilla u otra en función de lo que hiciera el jugador. Supongo que ahora soy un programador de IA.
July 29, 2025 at 7:37 AM
Hace un mes hice un tres en raya con LitElement que incluía un modo de un jugador en el que la app marcaba una casilla u otra en función de lo que hiciera el jugador. Supongo que ahora soy un programador de IA.
In our 7th episode of #CloudDevClarity, @AndrewConnell & @jfj1997 cover web frameworks like #react, #angular, & review the results of the 2021 State of #JavaScript survey & offering up our opinions. #alpine #svelte #solidjs #litelement #lithtml #alpinejs https://youtu.be/sHMwAqFRT-I
November 19, 2024 at 7:15 PM
In our 7th episode of #CloudDevClarity, @AndrewConnell & @jfj1997 cover web frameworks like #react, #angular, & review the results of the 2021 State of #JavaScript survey & offering up our opinions. #alpine #svelte #solidjs #litelement #lithtml #alpinejs https://youtu.be/sHMwAqFRT-I
This is either smart or a disaster; a LitElement directive that allows a web component to define in-line HTML elements in its template that are magically portaled out to the component's lightDOM and a `` for it injected where the element was defined:
github.com/goauthentik/...
github.com/goauthentik/...
github.com
February 27, 2026 at 11:35 PM
This is either smart or a disaster; a LitElement directive that allows a web component to define in-line HTML elements in its template that are magically portaled out to the component's lightDOM and a `` for it injected where the element was defined:
github.com/goauthentik/...
github.com/goauthentik/...
Indeed!
There are some major differences though:
- Lit doesn't have its own proprietary component model. Web components are the only components.
- LitElement is just a base class that extends HTMLElement to add helpers, so you can use any standard HTMLElement APIs to build your elements.
There are some major differences though:
- Lit doesn't have its own proprietary component model. Web components are the only components.
- LitElement is just a base class that extends HTMLElement to add helpers, so you can use any standard HTMLElement APIs to build your elements.
May 3, 2026 at 7:45 PM
Indeed!
There are some major differences though:
- Lit doesn't have its own proprietary component model. Web components are the only components.
- LitElement is just a base class that extends HTMLElement to add helpers, so you can use any standard HTMLElement APIs to build your elements.
There are some major differences though:
- Lit doesn't have its own proprietary component model. Web components are the only components.
- LitElement is just a base class that extends HTMLElement to add helpers, so you can use any standard HTMLElement APIs to build your elements.
A new AI review! gdg-x/hoverboard ⭐3.8/5.0
Hoverboard is a well-known, production-oriented conference website template built around Web Components (Polymer/LitElement), Firebase (Firestore + Cloud Functions), and PWA best practices.
https://gitrated.com/gdg-x/hoverboard
Hoverboard is a well-known, production-oriented conference website template built around Web Components (Polymer/LitElement), Firebase (Firestore + Cloud Functions), and PWA best practices.
https://gitrated.com/gdg-x/hoverboard
April 7, 2026 at 12:18 AM
A new AI review! gdg-x/hoverboard ⭐3.8/5.0
Hoverboard is a well-known, production-oriented conference website template built around Web Components (Polymer/LitElement), Firebase (Firestore + Cloud Functions), and PWA best practices.
https://gitrated.com/gdg-x/hoverboard
Hoverboard is a well-known, production-oriented conference website template built around Web Components (Polymer/LitElement), Firebase (Firestore + Cloud Functions), and PWA best practices.
https://gitrated.com/gdg-x/hoverboard
did that actually work out?
i have a feeling that the <script type=module> will load the module asynchronously, so you’re nondeterministically have LitElement on window (globalThis) on the following <script> tags, depending on the module load speed.
i have a feeling that the <script type=module> will load the module asynchronously, so you’re nondeterministically have LitElement on window (globalThis) on the following <script> tags, depending on the module load speed.
May 31, 2025 at 4:00 PM
did that actually work out?
i have a feeling that the <script type=module> will load the module asynchronously, so you’re nondeterministically have LitElement on window (globalThis) on the following <script> tags, depending on the module load speed.
i have a feeling that the <script type=module> will load the module asynchronously, so you’re nondeterministically have LitElement on window (globalThis) on the following <script> tags, depending on the module load speed.
It's our mixin that let's a LitElement use a scoped registry ergonomically. It assumes a scoped element registry implementation beneath it - like the polyfill. We'll update it to use the latest proposal soon.
www.npmjs.com/package/@lit...
www.npmjs.com/package/@lit...
@lit-labs/scoped-registry-mixin
A mixin for using speculative
www.npmjs.com
March 20, 2025 at 11:46 PM
It's our mixin that let's a LitElement use a scoped registry ergonomically. It assumes a scoped element registry implementation beneath it - like the polyfill. We'll update it to use the latest proposal soon.
www.npmjs.com/package/@lit...
www.npmjs.com/package/@lit...