RESOLVED DUPLICATE of bug 199733 196347
Slot content is not rendered if the content was inserted before the slot is inserted 
https://bugs.webkit.org/show_bug.cgi?id=196347
Summary Slot content is not rendered if the content was inserted before the slot is i...
Simon Strandman
Reported 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.
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
Show Obsolete (3) View All Add attachment proposed patch, testcase, etc.
Ryosuke Niwa
Comment 1 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.
Simon Strandman
Comment 2 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.
Simon Strandman
Comment 3 2019-03-29 00:11:13 PDT
Created attachment 366256 [details] New testcase
Simon Strandman
Comment 4 2019-03-29 00:11:36 PDT
Created attachment 366257 [details] Screenshot
Ryosuke Niwa
Comment 5 2019-03-29 14:51:17 PDT
Thanks! Still reproduces on trunk.
Ryosuke Niwa
Comment 6 2019-03-29 15:13:41 PDT
Created attachment 366310 [details] Reduction
Ryosuke Niwa
Comment 7 2019-03-29 15:14:08 PDT
The assigned slot returns the correct value so we're likely missing style invalidation somewhere.
Ryosuke Niwa
Comment 8 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 ***
Note You need to log in before you can comment on or make changes to this bug.