Hi all,

So I'm making my first Firefox/Chrome extension (starting with Firefox bc go Firefox!) and I'm having trouble with the styling. Essentially, I want to be able to highlight a word, get a summary for it from wikipedia, and then display the summary in a little popup. I've got all that working, my problem is that unless I'm on a super basic site, my popup is getting pushed all over the place (usually to the bottom of the screen).

Here's some pics:

Working:

Not working:

My code: full source code

So I always have a variable for a card in my js. When I want to add the card I update the text from my Wikipedia API call and add it to the html and when I want to remove it I remove it from the HTML. Easy enough.

Previously I had problems with styles overriding my own styles, so I put my card in a shadow DOM. Basically, I create a placeholder div, append it to the document body, and attach a shadow dom to it. Then I just add my card into the shadow dom:

const shadowHost = document.createElement("div");
shadowHost.className = "wikiclick";
shadowHost.style.position = "absolute";
shadowHost.style.zindex = "2147483647";
document.body.insertBefore(shadowHost, document.body.firstChild);
let shadow = shadowHost.attachShadow({ mode: "open" });

When I highlight something, I get the x and y position of the highlight so I know where to position my card. I'm trying to use that and absolute positioning for my "shadowHost" div to render my card in the right place, but obviously it doesn't seem to work. Interestingly, on the working example, you can see that the x and y position get added to the inline styles, but in the non-working example they don't. I think it has to have something to do with the website overriding my styles/forcing itself onto my component.

Working:

Not working:

I am super thoroughly confused. Any advice for how to get my popup in the right place would be verrrrry much appreciated!!!