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.
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.
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.
Created attachment 366256 [details]
Created attachment 366257 [details]
Thanks! Still reproduces on trunk.
Created attachment 366310 [details]
The assigned slot returns the correct value so we're likely missing style invalidation somewhere.