The easiest way to explain my issue is by using the Youtube site to replicate it. I am testing this on Mac OS, using Google Chrome 98:

Steps to Reproduce:

1. Go to Youtube in Dark Mode (background is #181818) (it's easiest to see the effects in dark mode, but it should also work in light mode too but the background will be #f9f9f9)

2. Open up Developer Tools and paste the following into the console:

const div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "100px";
div.style.top = "300px";
div.innerText = "This is a test";
div.style.setProperty("background-color", "transparent", "important");
document.body.appendChild(div);

3. Try copying the text and pasting into a Google Doc. A black background is seen.

My goal is to insert a div through JavaScript, such that when the text is copied and pasted, there is no black background. My suspicion is that since I'm setting the background to transparent, on copy, it is inheriting the page's background (since Youtube is setting the html { background: #181818 !important} within one of their script tags.

So instead of making the background transparent, if I try this: div.style.setProperty("background-color", "rgba(0,0,0,0.01)", "important");, the black background seemingly disappears (even though it is technically still there). Is there any way to make the text truly transparent on paste for an inserted div in this situation?

I do want to keep all other text formatting other than the background, so intercepting copy from JavaScript would not be ideal, and I'm looking for a CSS solution.