Ability to define slots as <template>'s with proper DOM hydration

[campbeln]

Not all DOM elements can exist outside of specified parent elements. For example, a <tbody> cannot exist outside of a <table> nor an <option> or <optgroup> outside of a <select>. However, these nesting-required DOM elements can be defined under a <template> as it's contents are not parsed.

It would be nice to be able to define a slot source as <template slot="slotName"/> and have it's (unparsed) innerHTML properly hydrated (see an in-depth discussion here). Conversely, the ability to have <table><tbody slot="slotName"></tbody></table> definitions would be required, or another solution would have to be worked out to properly target the slot's destination without breaking the DOM (as a <slot> is not valid under a <table>, or is this different in the world of webcontrols?).

The end result of this feature would be the ability to define complex <table> structures as well as <option>s`s under `s using handlebar'ed HTML, removing the need for verbose object definitions to set individual classes/values/content/etc. A possible alternative to this would be to create a hook that allows for developer code to handle the slot HTML insertion, whereby allowing the developer to target the required elements and properly hydrate the DOM as required prior to (re)binding. This would be a nice feature in it's own right, but would add to Svelte's API which may not be a desired result.

[campbeln]

For reference, here is a proper mapping of DOM elements that require nesting (with some elements missed in the article referenced above):

var a_oWrapMap = {
    _:      [1, "<div>", "</div>"],
    option: [1, "<select multiple='multiple'>", "</select>"],
    legend: [1, "<fieldset>", "</fieldset>"],
    area:   [1, "<map>", "</map>"],
    param:  [1, "<object>", "</object>"],
    thead:  [1, "<table>", "</table>"],
    tr:     [2, "<table><tbody>", "</tbody></table>"],
    col:    [2, "<table><colgroup>", "</colgroup></table>"],
    td:     [3, "<table><tbody><tr>", "</tr></tbody></table>"],
    body:   [0, "", ""]
};

//# Map the matching tags to their base definitions
a_oWrapMap.head = a_oWrapMap.body;
a_oWrapMap.optgroup = a_oWrapMap.option;
a_oWrapMap.th = a_oWrapMap.td;
a_oWrapMap.tbody = a_oWrapMap.tfoot = a_oWrapMap.colgroup = a_oWrapMap.caption = 
a_oWrapMap.thead;

A full implementation of the above a_oWrapMap can be seen here.

[PatrickG]

I don't really understand what you are trying to solve.
You can use slots to create correct html.

Also, your wrap-thing is no really covering all possibilities, for example an <option> element is (at the moment) valid inside a <select>, <datalist> or <optgroup>.

[campbeln]

<datalist> is a new one for me (thanks!) but the linked code still works as any passed un-nested <option>s can be properly hydrated under a <select> via innerHTML = and returned as Nodes that can then be inserted under a <dataset> if so desired. The problem is during hydration from text to Nodes it is ignored (fails) if not nested under one of the expected parent tags. <optgroup> and <option> are properly handled as <optgroup><option/></optgroup> would be nested under a <select>.

As to your example, excellent! The only remaining issue I see is being able to multi-home the slot HTML, like this (which also seems to work!) and in the Table example you created as well. It would be nice to see an example of this under https://svelte.dev/examples (or did I manage to miss it?)!

TL;DR: It looks like everything is working as desired and ultimately my issue stems from #3128 and #3136 (progress on those would be excellent!).