renderGrid gifs positions are not set properly in lit

[zizhouW]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am trying to use the renderGrid component inside a lit project.
It seems like all gifs are rendered with

position: absolute;
top: 0px;
left: 0px;

and stacked together as a result. Could it be because of shadow DOM?

Expected behavior 🤔

renderGrid should form a grid to display all gifs fetched

Steps to reproduce 🕹

https://codesandbox.io/s/litelement-typescript-forked-i8nz57

Screenshots or Videos 📹

Platform 🌍

• macOS, Windows, Android
• Chrome, Firefox, Safari

GIPHY-JS SDK version

@giphy/js-components 5.8.2

TypeScript version

v4.7.4

Additional context 🔦

No response

[giannif]

@zizhouW I do feel it has something to do with lit, although I am not familiar enough with the framework or shadow doms to diagnose. I also see a runtime error on hover. This may take awhile to evaluate

In a non-lit environment, everything is still working with the package versions you're using: https://codesandbox.io/s/giphy-js-components-1wq52x1w44?file=/src/grid.ts

You may need a new approach if you're working with the shadow dom. Maybe you can use the fetch api and render your own grid in the meantime

[zizhouW]

Thank you @giannif! Looks like both the odd positioning as well as the on hover errors are because of renderGrid being wrapped in shadow DOM. I have updated the codesandbox to show a comparison between being wrapped in shadow DOM vs NOT wrapped in shadow DOM. I see that renderGrid is using bricks.js for the "render logic" 🤔