2023867 - CSS @scope (:host) not crossing shadow root boundaries

Status: NEW

(Core :: CSS Parsing and Computation, defect, P3)

Description

[[e-mail]]

Attachment: Correct render.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:148.0) Gecko/20100101 Firefox/148.0

Steps to reproduce:

Go to https://jsfiddle.net/4yodsgfb/1/ and click "Run" if needed.

The nested divs (.wrapper1 and .wrapper2) should have the correct css props.

Actual results:

The nested divs (.wrapper1 and .wrapper2) lack the css properties defined inside @scope.

Expected results:

Tested with other browsers (latest Chrome and Safari) and it renders as expected, see attached screenshot.

Comment 1

[[e-mail]]

Attachment: Wrong render.png

Comment 2

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[[e-mail]]

One additional note I forgot to mention: the commented CSS targets only Firefox and produces the expected result.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Attachment: Test-case from reporter

Comment 5

[Emilio Cobos Álvarez [:emilio]]

:host is special, we are probably failing to set the right scope in the MatchingContext.

I'm curious, what's the use case for this? @scope (:host) is similar to @scope (:root) outside the shadow tree...

Comment 6

[[e-mail]]

We are using a modified version of SingleSPA to inject parcels (UI elements in our case) into the page. One of our elements needs to fill the vertical space of the container element (our :host).

What I was trying to obtain was to set the :host element to flex and my content (.element in then linked example) to grow and fill the parent.

Then I noticed is that there are 2 extra divs that are added between :host and .element. My idea was to force a display contents to all elements between :host and .element since they are not needed.

Comment 7

[[e-mail]]

Attachment: DOM Structure.png

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Seems you could do that with something like: *:not(:is(.element, .element *)) { display: contents } but yeah that's a weird one :)

Comment 9

[[e-mail]]

A bit :D
I also tried something else but @scope seems to better approach for my use case.

As in the attached fiddle:

:host {
    div:has(.element) {
        display: contents;
    }
}