I am currently implementing a custom CSS style over an application without the ability to modify its code.
Initially, the DOM structure looked like this:
<div class="foo">
<div class="bar"></div>
</div>
and I could easily make modifications using .foo .bar.
However, with the latest version release of the app, the child element is now within a shadow DOM:
<div class="foo">
#shadow-root
<div class="bar"></div>
</div>
As expected, my previous selector no longer functions. How can I target the .bar element only if it is nested inside a .foo element? I have come across information about ::part(), but unfortunately, I am unable to add part="bar" directly to the DOM element. Thank you for any assistance provided.