Re: [whatwg/dom] Proposal: a DocumentFragment whose nodes do not get removed once inserted (#736)

Came here to suggest something very similar (possibly the same?). Basically a `DocumentFragment` that can actually be connected to the DOM and still exists, still has childNodes, but now also has a `parentNode`. It would be transparent to CSS, as well as any DOM method that does not already have a reference to it. 

For example, in the following structure:

```html
<select>
 <#fragment>
  <option></option>
 <#/fragment>
</select>
```

Here's what `parentNode` and `childNodes` would return for each of these:

| DOM property | `select` | `fragment` | `option` |
|--------|--------|--------|--------|
| `.parentNode` | N/A | `<select>` | `<select>` |
| `.childNodes` | `NodeList [<option>]` | `NodeList [<option>]` | `NodeList []` |

This also means if there are no references to it, it can be garbage collected, making it potentially possible to perhaps not even subclass `DocumentFragment`, since for most existing `DocumentFragment` uses, nothing would change. But if the web compat of that is prohibitive, we can create a new `PersistentDocumentFragment` that inherits from `DocumentFragment`, with an easy way to upgrade one into the other (constructor argument `PersistentDocumentFragment.from()` factory?). 

There could even be a declarative version like `<template fragment>`, akin to declarative shadow roots.

A primary use case is indeed, templating, but in the broader sense, that includes reactive conditionals, loops, etc. For regular templating that is output-only, maintaining references to fragments is less useful. But every reactive templating language (VueJS, Alpine, Mavo, etc) needs a primitive like this and currently either forces users to use containers (and a valid option does not even always exist), or does complicated stuff with markers, HTML comments, and whatnot.

Given the overwhelming support expressed via reactions in the first post, I’m surprised there isn't more implementor interest…

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/736#issuecomment-1747276719
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/736/1747276719@github.com>