Lightbox in the shadow DOM

[dronem]

We wanted to display the lightbox in the shadow DOM, but we can't figure out how to do it.
Could you show us the direction in which we could move?

[igordanchenko]

Can you share a codesandbox mockup of what you are trying to build? You can replace the lightbox with a fullscreen <div> just for the purpose of this demo. Also, what’s your use case for using Shadow DOM?

[dronem]

maybe add the option of where to place yarl__root

[igordanchenko]

Well, that still doesn't answer my question 😃 I'm still unclear why you really need the lightbox to be rendered inside the shadow DOM.

I can definitely add a configuration option so you could specify the portal mount point. But if it's going to be inside the shadow DOM, you'll need to inject YARL css stylesheet somehow (in your example yet-another-react-lightbox/styles.css is loaded inside the document head rather than in the shadow DOM).

Here is what I've got so far with a custom patch -

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-107-rpikmn?file=%2Fsrc%2FApp.tsx

Is this what you are looking to get as the end result?

[dronem]

We use shadow DOM to avoid style conflicts. Thank you for the patch. Cool idea! Could you please suggest how we can use this approach without modifying the library?

[igordanchenko]

I'll release this feature shortly. You'll be able to specify your custom portal mount point as follows:

<Lightbox
  portal={{ root: shadowRoot }}
  // ...
/>

[dronem]

thank you so much

[igordanchenko]

This is now available in v3.5.0

[dronem]

thank you so much

[dronem]

i have a problem with padding-right: 17px; in body tag
Can you provide me with instructions on how to disable it?
Do you have any idea?

[igordanchenko]

This is not a problem per se but rather an intended feature. To hide the scrollbar when the lightbox opens, YARL adds the following CSS class to the document boby:

.yarl__no_scroll {
 height: 100%;
 overflow: hidden;
 overscroll-behavior: none;
}

and sets padding-right: 17px on the document body.

You are probably not seeing this working properly because you didn't include YARL CSS in the main document.

My recommendation here is to add the above CSS class to your main document, and let the lightbox work the way it was designed.

But if you are dead set on sacrificing the UX and eliminating this feature, you can do this as follows:

<Lightbox
  plugins={[({ remove }) => remove("no-scroll")]}
  // ...
/>

[dronem]

Hello
I have a problem with plugin Fullscreen
link https://codesandbox.io/p/sandbox/yet-another-react-lightbox-107-forked-41l1v0?file=%2Fsrc%2FApp.tsx
Did i do something wrong?

[igordanchenko]

Can you describe the problem so that I'm clear? I'm not sure how the below screenshot is related to the Fullscreen plugin.

[dronem]

Please open link https://41l1v0-5173.csb.app/
and click Fullscreen button ,
then click it again

[igordanchenko]

Let's call the Fullscreen plugin incompatible with the shadow DOM. Rendering the lightbox in the main document (not the shadow DOM) should resolve this issue.

Resolved in #271