Bug 196347 - Slot content is not rendered if the content was inserted before the slot is inserted
Summary: Slot content is not rendered if the content was inserted before the slot is i...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2019-03-28 04:45 PDT by Simon Strandman
Modified: 2019-03-29 15:14 PDT (History)
2 users (show)

See Also:


Attachments
Testcase (1.69 KB, text/html)
2019-03-28 04:45 PDT, Simon Strandman
no flags Details
New testcase (2.28 KB, text/html)
2019-03-29 00:11 PDT, Simon Strandman
no flags Details
Screenshot (556.58 KB, image/png)
2019-03-29 00:11 PDT, Simon Strandman
no flags Details
Reduction (417 bytes, text/html)
2019-03-29 15:13 PDT, Ryosuke Niwa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Simon Strandman 2019-03-28 04:45:40 PDT
Created attachment 366164 [details]
Testcase

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]
Screenshot
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]
Reduction
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.