We've been working on porting our LWC components from platform into LWC OSS. In order to do this, we have a copy of SLDS classes we have created and we need them to be applied globally.
For us will be a pain to move each class to each of the +50 components so we are using
import from '@lwc/synthetic-shadow' in order to enable global CSS.
While this works really good, the behavior of the slots are different between synthetic and shadow DOM.
Here is my example:
We have a component with one slot:
This is the parent component that is passing data to the slot:
With shadow dom, the slots works fine:
But, after importing
@lwc/synthetic-shadow, the slots behave in reverse order: