How to select custom/imported component? | Astro Lounge | Page 1

proud torrent Feb 16, 2023, 7:48 AM

#

I have a svelte component I am importing:

---
import Option from "../layouts/Option.svelte";
---

<Option >foo</Option> // select this
<Option >bar</Option>
<Option >foobar</Option> // select this
<Option >spam eggs</Option>

How do I select specific of them? It is not like I can have id or classname attribute on any of them

sick valve Feb 16, 2023, 8:40 AM

#

you could always make a prop on <Option class="your classes"
and then use that string to inject in your component

proud torrent Feb 16, 2023, 8:53 AM

#

sick valve you could always make a prop on `<Option class="your classes"` and then use that...

dosent work

#

Just says null when i try to read it

sick valve Feb 16, 2023, 9:16 AM

#

how are you using the class / prop in Svelte?

#

Because it might be easier to make an Option.astro which is a wrapper with a <slot /> that defines the style and then slot your Svelte component in there

proud torrent Feb 16, 2023, 9:26 AM

#

Sorry, I dont understand what you mean. This is what my code looks like:

---
import MainPage from "../layouts/MainPage.astro";
import Option from "../layouts/Option.svelte";
---

<MainPage title="Index">
  <div class="option-list inset-x-0 bottom-0 absolute text-white flex mb-16 mx-5 items-center text-center justify-center text-xl">
    <div>
      <Option client:idle>foo <b>bar</b></Option>
      <Option client:idle>bar <b>foo</b></Option>
      <Option client:idle>spam <b>egg</b></Option>
      <Option client:idle><b>foobar</b></Option>
    </div>
  </div>
</MainPage>

I basically want to display different html depending on what button is clicked

proud torrent Feb 16, 2023, 5:19 PM

#

How do I add a separate click event listener to each Option component? They are svelte components. I want to display different html depending on which Option component is clicked.

#How to select custom/imported component?