Allow style props on components about fluent-svelte HOT 4 CLOSED

@Tropix126 Yep, I get your point but I find style attribute to be quite useful sometime. Let's keep it that way and thank for the explanation about component styling.

Do you think it should be added in the docs?

I eventually plan to add a page explaining some common patterns across different components, including the behavior of $$restProps.

from fluent-svelte.

Most components at the moment use the $$restProps feature of svelte, which passes all "unknown" props given to a component down to a specific element as HTML attributes. In fluent-svelte, the element these props are passed down to varies based on the component's functionality. In most cases, it's the outermost element of the rendered component.

So: in most cases you can actually use the style attribute to some extent. The problem here is that components are not a single element meant to be styled this way. Components are a complex tree of elements that render into an encapsulated UI pattern.

Rather than using this approach, a better method to style fluent-svelte components would be to use global styling + custom class names. At the moment almost all components have the option to provide a class prop, which will be applied to the outermost element in the component, meaning we can do something like this:

<script>
	import { Button } from "fluent-svelte";
</script>

<Button class="custom-button">Button With Custom Styling</Button>

<style>
	:global(.custom-button) {
		padding: 20px;
	}
</style>

This is better for a few reasons:

1. It avoids the specificity hell you get into when using inline styles. The style attribute can only be overridden by an inline style below it or the !important flag.
2. You can still get scoped styles. :global in svelte essentially tells the compiler not to attach a hashed classname to a given piece of CSS, but you can also have something like .container :global(.custom-button) {} which will preserve a scope of .container.svelte-<hash>.
3. In general it avoids the confusion of where {...$$restProps} will be applied. Classes in fluent-svelte are always applied to the outermost given element.

from fluent-svelte.

If you have any other questions regarding styling limitations, feel free to ask me and i'd be glad to reopen this issue.

from fluent-svelte.

@Tropix126 Yep, I get your point but I find style attribute to be quite useful sometime. Let's keep it that way and thank for the explanation about component styling.

Do you think it should be added in the docs?

from fluent-svelte.