FluentSwitch ::slotted() Css selector doesn't work unless !important is applied

[Mike-E-angelo]

I am attempting to use the FluentSwitch control, and all works well except for the styling:

I found the selector:

But only when I add !important does it work:

Is this a setting somewhere? Or a bug? I wanted to verify before opening another issue. For reference I "fixed" this by encountering this blog:
https://www.matuzo.at/blog/2022/100daysof-day45

EDIT: I should also mention that margin-inline-start does not return for any other style applied to this control:

So it is unclear to me how this is not being applied and what is overriding it. If it was overridden it seems like this rule would be crossed out altogether, but it is not.

[vnbaaij]

If I look at the default example at https://www.fluentui-blazor.net/Switch, it looks like the styling is being applied to the 'new feature' switch. I'm not at a pc for a couple of days so can't look further into it. Can you compare your code with the example?
Oh, BTW the 'constructed' reference as to where the css is defined, indicated that it comes from the web component script. If it is indeed a bug, we might need to open an issue in that repo.

[Mike-E-angelo]

Thank you for your time and answer @vnbaaij it got me looking around a bit further. I was looking for the margin-inline-start but there is a rule applied to the template that I am using that is applying to all margins:

It seems like this would strike out the ::slotted rule to help assist in tracking down, but it does not. Seems like a firefox issue. In any case, removing this rule from the theme fixed it. 👍