Given this DOM:
If the slot element is removed from the shadow root, and then (in a separate timeout) div#slotted is removed from the light DOM, the div#container will lose its layout and become invisible on the page.
Minimal repro case:
The following things happen in the link above:
1. The output becomes yellow (background of #container)
2. The output becomes green, and has some text (the slot inside of a div#bg container has been appended into the Shadow DOM)
3. The output becomes green, without text (the slot has been deleted from the Shadow DOM)
4. The output becomes RED (the div#slotted is removed from the Light DOM, and #container loses layout, revealing the body of the page behind it!)
I'd expect that step 4 stays the same as step 3. I've tested other browsers and that's what they do.
I've seen this bug with Safari 14 and 15 (Tech preview) in MacOS 11.4 (Big Sur) and stock Safari on iOS 14.6.
Original user report (Flutter Web): https://github.com/flutter/flutter/issues/84832
Issue workaround here:
I can reproduce this at r279638.
Thanks for verifying in a more recent build!
(I couldn't get builds from the archives to run in my corporate laptop properly!)
Created attachment 433113 [details]
Created attachment 433128 [details]
Committed r279721 (239509@main): <https://commits.webkit.org/239509@main>
All reviewed patches have been landed. Closing bug and clearing flags on attachment 433128 [details].