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

DeepDoge left a comment (whatwg/dom#736)

@rniwa `NodeGroup` suppose to appear in the DOM tree. It should have the `ParentNode` and `ChildNode` interfaces, and not be an `Element`. A `NodeGroup` can be empty like any other `ParentNode`. Only thing is, its transparent to query selector since its not an `Element`.

Right now, comment nodes are used for similar behavior which is a hack, and it can break the framework when DOM is mutated without the framework, which is absurd.

---

<details>
<summary>
More details that might be a little off topic, but important for context. At least for one of my use case.
</summary>
In order to have a DOM that doesn't break when mutated without the framework, we also need a sync way to follow lifecycle(connected/disconnect) of DOM child nodes, including this new `NodeGroup` since it's also a `ChildNode`. This is needed so we can cleanup things when a `Node` is connected or disconnected from the DOM.
<br/><br/>
<b>For example:</b>
We can create a `NodeGroup` that is bind to a Signal. And call `.replaceChildren()` on the `NodeGroup` every time Signal emits a change. It can also be empty too, like normal. 
We can reference this `NodeGroup` like any other `Node` anywhere, and append it anywhere in the DOM as well, like any other `ChildNode`. And when `NodeGroup` is disconnected we can stop listening the Signal, and when it's reconnected we can start listening again.

Currently only thing we can follow lifecycle of synchronously is custom`HTMLElement`(s), and only the custom ones for some reasons. _(Following lifecycle of any `Element` can be supported by this proposal in the future: https://github.com/WICG/webcomponents/issues/1029)_

For example right now we can have something like this:
```ts
class SignalViewer extends HTMLElement {
   constructor(signal: Signal)
}
```
The problem is, this is an `HTMLElement`, meaning it that its visible to query selectors. One problem would be having a `<ul>` parent and having a Signal in it that gives bunch of `<li>` elements. Since signal represented as `HTMLElement` on the DOM, CSS query selectors like `ul > li` won't work. As I said, right now comment nodes are abused by the frameworks, and also frameworks break if you connect or disconnect stuff from the DOM without the framework.

Once `NodeGroup` exists it would be easy to represent reactive `ChildNode`(s) in DOM, for example as easy as this:
```ts
toChild(value: unknown): string | Node
{
    //...
    if (/* value is signal */) {
      // Return `NodeGroup`
    }
    // ...
}
``` 
</details>

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

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