Remove or Modify CSS Classname "svelte-" Prefix

Question

I have written a chatbot widget with Svelte, which should be able to be integrated into websites. The website owner gets the compiled JS and CSS file. So far so good.

But every website owner must have the possibility to overwrite styles from the CSS file. No problem, he could for example simply overwrite the background color of the header:

.chat-widget.svelte-kcmu8l header.svelte-kcmu8l {
    background-color: #fff;
}

But: For example, suppose I fix a bug and recompile the widget. Let's further assume that my change has caused the hash kcmu8l to change and that the previous adjustments made by the website owner no longer work.

How can I prevent such a situation? Is it possible to omit the svelte-xxx class or define an own hash value?

Answer 1

You must maintain the CSS classes you do not want hashed in an external stylesheet. They cannot be present in the Svelte component.

To prevent Svelte from hashing and modifying your CSS names, you remove the relevant CSS styles from the inline Svelte component, then maintain the classes in any external CSS stylesheet that is loaded on the page where your app is instantiated.

There are legitimate needs for not using the Svelte generated class names, such as allowing your embedded apps to have their styles overwritten.