La forma más fácil de explicar mi problema es usar el sitio de Youtube para replicarlo. Estoy probando esto en Mac OS, usando Google Chrome 98:

Pasos para reproducir:

1. Vaya a Youtube en modo oscuro (el fondo es #181818) (es más fácil ver los efectos en modo oscuro, pero también debería funcionar en modo claro, pero el fondo será #f9f9f9)

2. Abra Developer Tools y pegue lo siguiente en la consola:

 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. Intente copiar el texto y pegarlo en un documento de Google. Se ve un fondo negro.

Mi objetivo es insertar un div a través de JavaScript, de modo que cuando el texto se copie y pegue, no haya un fondo negro. Mi sospecha es que, dado que estoy configurando el fondo como transparente, en la copia, hereda el fondo de la página (ya que Youtube está configurando el html { background: #181818 !important} dentro de una de sus etiquetas de script.

Entonces, en lugar de hacer que el fondo sea transparente, si pruebo esto: div.style.setProperty("background-color", "rgba(0,0,0,0.01)", "important"); , el fondo negro aparentemente desaparece (aunque técnicamente todavía está allí). ¿Hay alguna forma de hacer que el texto sea realmente transparente al pegar para un div insertado en esta situación?

Quiero mantener todos los demás formatos de texto que no sean el fondo, por lo que interceptar la copia de JavaScript no sería lo ideal, y estoy buscando una solución CSS.