I've been playing around with Svelte 3. I'm trying to create a basic Link component that's used like this:
<Link to="http://google.com">Google</Link>
My component renders a normal HTML <a>
tag with a favicon in front of the link text:
<script>
export let to
const imageURL = getFaviconFor(to)
</script>
<a href={to}>
<img src={imageURL} alt={`${title} Icon`} />
<slot />
</a>
The title
variable I'm showing in the alt attribute for my <img>
tag needs to be the text value of the unnamed slot. This is a really basic example, but is there any way to get the value of a slot like this?
In the mean time I found another (even better and not so hacky) way:
<script>
export let to
let slotObj;
const imageURL = getFaviconFor(to)
</script>
<a href={to}>
<img src={imageURL} alt={slotObj? slotObj.textContent + ' Icon' : 'Icon'} />
<span bind:this={slotObj}><slot/></span>
</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With