Prevent Svelte from adding random classes

Question

I have a shadow-root component and I simply don't want svelte-kit to add those random classes to that specific element or its child elements. It would be nice if there was something in the settings like: document.getElementById("<id>").cssHash == false

Or any possible hacks to achieve this?

Answer 1

You can use a use action (tutorial | docs) for this:

let noClass = node => {
    node.classList.forEach(e => {if (e.startsWith('svelte-')) node.classList.remove(e)})
}

Then you use the directive on elements:

<div use:noClass>

et voila! Full example: https://svelte.dev/repl/31b4e0e04ec84ac6995f2a5f5c1f9cd5?version=3.57.0