Access Component Props in onLoad with <script client:visible>

[AnnikenYT]

Hi there! I'm trying to create a "Fade In component". I'm doing this by having a Template which contains a div and a script

<template>
  <div class="animatable" :id="'animatable-'+key" ref="animatable">
    <slot></slot>
  </div>
</template>

and a setup script that takes a key prop

<script setup lang="ts">
defineProps<{
    key: string;
}>();
</script>

And a client script that adds the .visible class to the div

<script client:visible lang="ts">
export const onLoad = () => {
    // Get the element and add the visible class
};
</script>

However, I don't know how I get the key prop within the client script. Anyone got ideas? I thought of having a <script> tag within the template which then declares a variable, but that didn't seem very scalable either, and AFAIK Vue ignores scripts in the template.
Any help is appreciated. Thanks in advance!

[ElMassimo]

Hi Anniken!

As mentioned in the docs, onLoad can have arguments.

The element of the client script will always come right after the rendered Vue component, so you can usually access with previousElementSibling, as in this example.

import type { OnLoadFn } from 'iles'

export const onLoad: OnLoadFn = (el) => {
  const animatableEl = el.previousElementSibling
}