Replies: 1 comment 1 reply
-
@zicklag There’s probably more that’s possible to streamline web component authoring in Astro, but using web components in Astro does work nicely currently. Here’s a small example: Component (
|
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hey folks! I just had an idea and I wanted to get feedback on it.
Problem Statement
I like the simplicity of the .astro template format. It's nice that I can just write HTML if I need nothing else, it's refreshing coming from vue.js when if I want a copy-paste style basic-html component, I have to have some boilerplate just to get it going.
But sometimes I also need the client-side reactivity, and I can't embed my Astro templates into the client-side framework I use.
For instance, I have a
PostCard.astro
component. It renders a blog post preview with an image, title, description and tags.There's no reactivity and it's a simple template, so Astro works great.
But then I have a filtered post list component. This will have a filter dropdown with checkboxes effecting the filter query. I want this to be loaded async without refreshing the page, when you change the filter parameters. This means I reach for a framework like Lit.js or Preact, probably.
I would love to be able to use my
PostCard.astro
component inside my Lit.js client-side component, but that's not possible!As it stands, I'm considering re-writing my
PostCard
component as a Lit.js component, because I can't include it in other Lit.js components such as my dynamic post-list, which is a little unfortunate.I start to wonder if it's better to use Lit.js for all of my re-usable components, so that I don't run into this issue again.
Idea
What if we could compile Astro components to web components, similar to what Lit.js does, which means they could be used in any client-side framework seamlessly. This would resolve my issue, because now my
PostCard.astro
component could be easily included in my Lit.js or Preact post list component.I really love how UI framework agnostic Astro is, and I feel like this would be the next level up.
Beta Was this translation helpful? Give feedback.
All reactions