Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Manipulate innerText in a slot while keeping slot style with svelte

$
0
0

I want to make a component that makes a typewriter effect, but I need to keep the styling inside the slot so I can use any text style with the same effect.

Main file :

<TypewriterText><h1>Hey what's up!</h1></TypewriterText>

TypewriterText.svelte :

<script>    import { onMount } from 'svelte';    let content = '';    let currentText = '';    let currentIndex = 0;    onMount(() => {        const data = document.querySelector('.hidden');        content = data?.innerText || '';        typeWriter();    });    function typeWriter() {        if (currentIndex < content.length) {            currentText += content.charAt(currentIndex);            currentIndex++;            setTimeout(typeWriter, 10);        }    }</script><span class="hidden"><slot /></span>{currentText}<style>    .hidden {        display: none;    }</style>

The only way I found is to hide the slot and reproduce the innerText below. But this way I lose the html tag...

Thx a lot !!


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>