Handle nodes that don't have a slot

[treshugart]

As Justin points out here, something our lib doesn't handle is undistributed nodes.

I'm trying to think how a search engine would want to see these, if at all. I'm thinking "no" because it's not something the user would see and there's no way to determine composed order. Given that, I think the best thing might be to contain undistributed nodes in a <template /> or and to put them in as light DOM upon rehydration.

One downside to this is that you lose ordering with distributed light DOM. A couple of ways around this might be to:

1. Render all light DOM in the template. When we hydrate we remove slotted content instead of moving it into light DOM. This is a simple approach, but duplicates nodes.
2. Render light DOM placeholders in the template where we "undistribute" the nodes to.

[bedeoverend]

+1 for approach described in 2 👍 I'm betting this'll be the best approach for transporting / hiding default slot content too.

Also, using the placeholder elements, you'd have to tag them based on the slots they were distributed to, then query for them during hydration - would this significantly hurt perf? I'm thinking of hydration performance vs weight of duplicate nodes with the approach described in 1. Would it be worth spiking the second to see perf / complexity issues?

[treshugart]

Would it be worth spiking the second to see perf / complexity issues?

Yeah, probably. There might be other ways to do this, too. I want to find out for sure if bots will crawl <template /> elements. If so this could change the entire implementation.

[bedeoverend]

Fair enough - once confident in a <template /> re: crawling, happy to make a PR exploring it

[treshugart]

Since we're not sending over the distributed tree anymore, we don't need to do this.