Bug 196347

Summary: Slot content is not rendered if the content was inserted before the slot is inserted
Product: WebKit Reporter: Simon Strandman <simon.strandman>
Component: DOMAssignee: Nobody <webkit-unassigned>
Severity: Normal CC: koivisto, rniwa
Priority: P2    
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: All   
Bug Depends on:    
Bug Blocks: 148695    
Description Flags
New testcase
Reduction none

Description Simon Strandman 2019-03-28 04:45:40 PDT
Created attachment 366164 [details]

If you create a custom element with a shadow DOM with slot elements Safari will not insert the slotted content if the content was added before the slot elements - except if it's the initial content. This works in Firefox and Chrome.

1. Create a custom element with a shadow DOM and add it to the document.
2. Append a child to the custom element with a slot property.
3. Append a slot element to the custom element shadow DOM with the same slot name.

The slotted element is properly rendered at this point.

4. Append another child to the custom element with a different slot property.
5. Append another slot element to the shadow DOM with the same slot name.

Now nothing is rendered. When looking at the DOM everything looks correct. The shadow DOM has two slot elements and the custom element has two children with matching slot attributes. However the children are not inserted into the slots and not rendered at all.

6. Append another slot element to the custom element shadow DOM with a new slot name.
7. Append another child to the custom element with the same slot name.

Now all slotted elements are rendered, including the one that was missing before.

I'm attaching a small html file that can be use to see the problem.
Comment 1 Ryosuke Niwa 2019-03-28 14:59:24 PDT
On which version of Safari are you seeing this problem?

Also, could you tell me the exact steps by which we can reproduce the issue? I couldn't get it to behave differently between Chrome & Safari Tech Preview 79.

Ideally, a test case simply execute code such that when it would result in different appearance in Safari vs Chrome/Firefox.
Comment 2 Simon Strandman 2019-03-29 00:10:22 PDT
I'm trying on Safari Technology Preview, "Release 78 (Safari 12.2, WebKit 14608.1.9.1)", dated 20 March. I couldn't get any of the nightlies to run but I guess this is recent enough. But it also happens with the latest stable version shipped with Mojave.

I'm adding a new testcase.html file that runs the steps I've described. It renders two lists, one with the expected content and one that should show the bug.

In Chrome and firefox both lists look identical but in safari the second list has only one slotted item instead of 2. Im attaching a screenshot as well.
Comment 3 Simon Strandman 2019-03-29 00:11:13 PDT
Created attachment 366256 [details]
New testcase
Comment 4 Simon Strandman 2019-03-29 00:11:36 PDT
Created attachment 366257 [details]
Comment 5 Ryosuke Niwa 2019-03-29 14:51:17 PDT
Thanks! Still reproduces on trunk.
Comment 6 Ryosuke Niwa 2019-03-29 15:13:41 PDT
Created attachment 366310 [details]
Comment 7 Ryosuke Niwa 2019-03-29 15:14:08 PDT
The assigned slot returns the correct value so we're likely missing style invalidation somewhere.
Comment 8 Ryosuke Niwa 2019-10-04 22:03:55 PDT
Apparently this got fixed in https://trac.webkit.org/changeset/250709 so duping this to the bug 199733.

*** This bug has been marked as a duplicate of bug 199733 ***