sl-divider doesn't render in SvelteKit app using Autoloader

[mato-a]

Describe the bug

sl-divider doesn't render in SvelteKit app using Autoloader

To Reproduce & Demo

Use Autoloader to install Shoelace in SvelteKit app and then try using <sl-divider></sl-divider>

The divider is not rendered as shown here: https://stackblitz.com/edit/sveltejs-kit-template-default-gt9s5b?file=src%2Froutes%2F%2Bpage.svelte

Using the same code using just plain html works fine.

Browser / OS

• shoelace@2.15.1
• firefox/chrome
• windows

[dvantuyl]

In your example, sl-divider isn't displaying because its intrinsic width in this flexbox context is zero. Minor CSS update will display the divider:

sl-divider { width: 100%; }

https://stackblitz.com/edit/sveltejs-kit-template-default-zwgaqx?file=src%2Froutes%2F%2Bpage.svelte

[mato-a]

Thanks @dvantuyl 👍

I've tried it in my own project but it wasn't actually the issue. Even with width at 100% the divider just wasn't showing...

So I dug a little deeper and I was able to figure it out.
The issue in my project wasn't really related to Svelte but to Tailwindcss resets - https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally
These were causing the border style of sl-divider to be overridden.
I was able to fix it just by adding !important to sl-divider default styles - https://github.com/shoelace-style/shoelace/blob/next/src/components/divider/divider.styles.ts:

sl-divider:not([vertical]) {
	border-top: solid var(--width) var(--color) !important;
}
sl-divider[vertical] {
	border-left: solid var(--width) var(--color) !important;
}

[mato-a]

related: #2088