How do I make the Plasmo CSUI container fill the anchor's width and height?

357 Views Asked by At

I'm making a browser extension using Plasmo and I need to have the CSUI container fill the anchor, so I can then use CSS to easily position the contents wherever I want using absolute values that are relative to the container. What Plasmo does is create a shadow root in the DOM, where it then puts the CSUI container. What happens now is Plasmo finds the upper left corner of the anchor element and sets the container absolute location to that, and that's fine, but now I need the container to also take up the width and height of the anchor, but by default it's 0x0px.

What I did to kind of position the contents temporarily was take the anchor element(passed in the CSUI root component props) and get the width property from anchor.offsetWidth

<div 
  className="absolute flex shadow-lg items-center justify-center w-8 h-8 border-white bg-green-500 rounded-full border-[3px]"
  style={{ left: anchor.offsetWidth - 32 }}>
...
</div>

This makes the contents go to the top right corner by subtracting the contents width from the anchor's width. But I don't like this approach, this is like forcing it to the right position, which can be unstable.

0

There are 0 best solutions below