What happens in these slot/content scenarios?

[trusktr]

What is the expected behavior in each of the following cases? In each case, assume "element" is a custom element that (at some point in time) will have a top-level shadow root, "shadow root".

1. Element's light dom content added first including elements with slot="" attributes, then shadow root added with existing shadow dom (includes named slots).
2. Shadow root is added first with existing shadow dom (includes named slots), then element's light dom content is added including elements with slot="" attributes.
3. Either of 1 and 2 happen first, but then later new content is added to element's light dom (with matching slot="" attributes).
4. Either of 1 and 2 happen first, then later the shadow dom is modified (including some slots added, removed, or moved into to new positions).
5. Any of the previous happen first, but then light dom content and shadow root's content are completely replaced. Shadow root contains new slots with new names, and light dom content has new elements with matching slot="" attributes.

What scenarios have I missed?

[rniwa]

In general, the slot element contains and only contains matching elements in the tree order. I suggest you test each of your case using Safari Technology Preview or WebKit nightly builds, which supports shadow DOM v1 API: https://webkit.org/downloads/

[treshugart]

There's no way to serialise a shadow root from HTML (yet) so you can make the following assumptions:

• The element will exist before its shadow root is created
• The element may, or may not, have light DOM when the shadow root is created
• The shadow root will be created without any slots (i.e. slots will always be added after it's created)

You also make the following assumptions in all scenarios:

• All nodes added to a shadow host are reported by childNodes
• Nodes added to a shadow host may or may not be slotted (i.e. appear in the composed tree)
• Nodes are slotted in tree order
• Nodes are only slotted if they are an element or text node

Those things accounted for:

• When you add a shadow root, the light DOM has nowhere to be slotted yet and will not be in the composed tree
• When you add a slot to the shadow root (by any means, including innerHTML) it will run the slotting algorithm if any light DOM exists
• When you add light DOM, the slotting algorithm is run on the new node. If it cannot be slotted, it's still a child of the host, but does not appear in the composed tree.

[hayatoito]

The order of DOM mutations does not matter. An engine should always react any DOM mutation if it affects the result of slotting. That's our goal.

See the details: https://dom.spec.whatwg.org/#mutation-algorithms

If you find a case where we are missing in the DOM Standard, please file a bug.