Bug 227652 - Shadow host stops rendering after removing a slot, updating style, then its assigned node
Summary: Shadow host stops rendering after removing a slot, updating style, then its a...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: All macOS 11
: P2 Normal
Assignee: Nobody
URL: https://jsfiddle.net/ditman/rmwqjLah/
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2021-07-02 17:43 PDT by David Iglesias
Modified: 2021-07-08 07:48 PDT (History)
12 users (show)

See Also:


Attachments
Reduction (771 bytes, text/html)
2021-07-07 20:54 PDT, Ryosuke Niwa
no flags Details
patch (3.58 KB, patch)
2021-07-08 06:21 PDT, Antti Koivisto
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description David Iglesias 2021-07-02 17:43:21 PDT
Given this DOM:

  div#container
    :shadowRoot
    |  div#bg
    |    slot[name=something]
    `
    div#slotted[slot=something]

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:

* https://jsfiddle.net/ditman/rmwqjLah/

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.
Comment 1 David Iglesias 2021-07-02 18:04:32 PDT
Original user report (Flutter Web): https://github.com/flutter/flutter/issues/84832

Issue workaround here:
https://github.com/flutter/engine/pull/27154

Cleanup ticket:
https://github.com/flutter/flutter/issues/85816
Comment 2 Ryosuke Niwa 2021-07-07 12:34:05 PDT
I can reproduce this at r279638.
Comment 3 David Iglesias 2021-07-07 19:38:34 PDT
Thanks for verifying in a more recent build!

(I couldn't get builds from the archives to run in my corporate laptop properly!)
Comment 4 Ryosuke Niwa 2021-07-07 20:54:24 PDT
Created attachment 433113 [details]
Reduction
Comment 5 Antti Koivisto 2021-07-08 06:21:22 PDT
Created attachment 433128 [details]
patch
Comment 6 EWS 2021-07-08 07:47:42 PDT
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].
Comment 7 Radar WebKit Bug Importer 2021-07-08 07:48:17 PDT
<rdar://problem/80323422>