Tengo un objeto de datos que contiene datos para encontrar un elemento específico que existe dentro de un árbol DOM y después de encontrar ese elemento, quiero cambiarlo agregando css en línea.

 { outerHtml: '<a class="btn btn-pill">\n <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path>', selector: ".col-auto.ml-auto.d-print-none>.d-flex>.btn.btn-pill", style: `background-color: #206bc4; color: white; svg { color: white }`, }

Estoy utilizando estos datos e inyectando los datos de estilo en el elemento una vez que lo encuentro. Como puede ver en mi HTML externo, el elemento principal también tiene un elemento secundario y, en mi estilo, también tengo el css para cambiar el color de svg. Pero cuando uso mi código a continuación. Solo cambia el estilo de la etiqueta a en comparación con el svg también.

Nota: el HTML externo y el selector son solo para encontrar el elemento correcto para cambiar. Algo así como identificadores únicos

Todo lo que hago en el siguiente código es usar mis selectores para encontrar el elemento correcto y luego agregar el CSS al nodo final.

 export function findAndInject(remove) { const data = getData(); let selector = data.selector.split(','); let select; for (const prop in selector) { if (prop == 0) { select = document.querySelector(selector[prop]); } else { select = select.querySelector(selector[prop]); } } if (remove) { select.style.cssText = null; } else { select.style.cssText = data.style; } }

Sé que el problema es probablemente que estoy haciendo style.cssText pero ¿hay alguna otra forma en que pueda agregar un estilo en línea que también se pueda agregar al elemento secundario sin crear una hoja de estilo o usar etiquetas de estilo?

Antes de la inyección:

Después de la inyección:

El ícono Más debe ser blanco.