I have a hierarchic CSS class selector and I am wondering if the declared styles will also apply if the class hierarchy occurs across shadow DOM boundaries. The CSS selector looks like this:
.section .row .col { color: #f00; } Then I also have some HTML markup that includes a custom element...
<div class="section"> <my-element></my-element> </div> ... and the element also has some markup:
<div class="row"> <div class="col"> Some red content </div> </div> I am using Polymer3 and the DOM looks quite well on rendering and my-element is setup as shadow DOM beneath the section div. Everything works fine, but the inner content of my-element is not red as expected. I also ensured that the stylesheet is imported (ES6 modules) in the custom element as well, but it seems that the class hierarchy cannot be selected properly across the shadow DOM. The DOM looks like this in the browsers console:
<div class="section"> #shadow-root (open) <div class="row"> <div class="col"> Some red content </div> </div> </div> So I am doing something wrong here or is this actually intended behaviour as we don't want to bleed CSS styles through the encapsulation of shadow DOM?
