5

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:

Component with slot

This is the parent component that is passing data to the slot:

Root component

With shadow dom, the slots works fine:

Shadow DOM result

But, after importing @lwc/synthetic-shadow, the slots behave in reverse order:

Synthetic DOM

7

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));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.