lapis siren
Hey, I'm wondering, is there any way to deterministically pass selectors/ids for a script tag to locate?
Consider this basic component, that needs to access a specific element for animation.
---
export interface Props {
x: number
}
const { x } = Astro.props
---
<div id="slide" data-x={x}>
<slot />
</div>
<script>
import { animate } from 'motion'
const el = document.getElemetById('slide')
animate(el!, { x: +el!.dataset.x })
</script>
This works very well for a single component i.e.
---
import Slide from '@/components/Slide.astro'
---
<!-- ✅ works fine -->
<Slide x={100}>
<p>weee i slide right</p>
</Slide>
However, as soon as I try to have the component be re-usable, I run into an issue (logically) of not having unique element ids. That's the easy part of the fix, could either explicitly pass it as a prop, or (even better, especially for the lazy) I just added uuuid.v4 to generate a unique id for the component, i.e.
id=`slide-${uuid.v4()}`
However I can't think of a way of reliably accessing the id in the script tag for the selector.
I know astro exposes the define:vars front-matter passing, but that's obviously not ideal, since it enforces the is:inline directive and breaks module imports.
I'm sure with this seemingly being a fairly common pattern, someone had to run into a similar issue. Is there really no better way of doing this in astro/vanilla js (ts) with a deterministic selector, rather than having to defer everything to a client hydration library like react or solid?
Thanks in advance 🙏
viral helm
