Injected html using content.js from Chrome extension is not showing on open.spotify.com

I'm making Chrome extension for fetching song lyrics. I want it to interact with YouTube and Spotify. Problem appeared with html injected with content script into Spotify website. I will give simplified reproducible example:

Contents of content.js:

const popup = document.createElement("div");
popup.innerHTML = `
    <div id="popup" style="position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: red; z-index: 9999999;">
        <p>Some text.</p>
    </div>
`;
document.body.appendChild(popup);

Big red square appears on youtube.com but not on open.spotify.com. When I inspect elements, I can see that #popup is present on both websites in body element just as is defined in contents.js.

What can be the problem here? In my original extension, all of the logic works fine except that popup is not showing.

Here's manifest.json if needed:

{
    "manifest_version": 3,
    "name": "Name",
    "version": "1.0",
    "description": "Desc.",
    "host_permissions": [
      "https://www.youtube.com/*",
      "https://open.spotify.com/*"
    ],
    "action": {
      "default_title": "Title."
    },
    "background": {
      "service_worker": "background.js"
    },
    "content_scripts": [
      {
        "matches": [
          "https://www.youtube.com/*",
          "https://open.spotify.com/*"
        ],
        "js": ["content.js"]
      }
    ]
  }
  

Problem was that on open.spotify.com is css style that hides divs without specific attributes:

body > div:not([id], [class]) {
    display: none;
}

As defined in content.js, html code which is <div id="popup"> is inserted into another div. So, what is finally inserted into open.spotify.com page looks like this:

<div>
    <div id="popup" style="position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: red; z-index: 9999999;">
        <p>Some text.</p>
    </div>
</div>

The outer div is affected by provided css code and is made invisible. Workaround that I used is to give outer div id "popup" and to copy popup's content into that div. Like this:

const popup = document.createElement("div");
popup.id = "popup";
popup.innerHTML = `
    <p>Some text.</p>
`; // style is added via external file, this is just a simplified example
document.body.appendChild(popup);

What may also work is to write custom css code to override Spotify's problematic css code but I didn't try it out.