Astro web component for a random post from a list of slugs

link-component.astro

---
let { text, posts } = Astro.props;
---

<astro-link data-posts={posts}>
	<a>{text}</a>
</astro-link>

<script>
	class AstroLink extends HTMLElement {
		constructor() {
			super();

			function randomPost(slugs) {
				slugs = slugs.split(",");
				const randomSlug = slugs[Math.floor(Math.random() * slugs.length)];
				return `/post/${randomSlug}`;
			}

			const slugs = this.dataset.posts;
			const link = this.querySelector("a");
			link.href = randomPost(slugs);
		}
	}

	customElements.define("astro-link", AstroLink);
</script>