Inconsistencies between shadow DOM and synthetic DOM on LWC OSS

Question

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 it 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:

Answer 1

After looking into all repos and issues for LWC, we have found the solution on the bottom readme of the LWC Recipes OSS repo:

The Edge browser currently doesn't support native shadow DOM. If you want to use this application you have to manually add the synthetic shadow DOM to your clone. Add to the first line of the index.js this code: 

import '@lwc/synthetic-shadow';

So, we modified the main index.js file to add the import on the first line and now it works:

import '@lwc/synthetic-shadow';
import { buildCustomElementConstructor } from 'lwc';
import MyApp from 'my/app';

customElements.define('my-app', buildCustomElementConstructor(MyApp));