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

robbiespeed left a comment (whatwg/dom#736)

> *From the meeting notes* 
> Steve: I think another bar to hold ourselves to, in addition to being a building block that frameworks can use, it should be a building block that doesn’t come with footguns. It would be valuable to try to make sure it’s valuable on its own, rather than only in large frameworks.

To answer this I'll give an example of someone building their own mini framework using only DOM APIs, and functions as DOM factories.

Some basic components that don't require this feature are ones that have a single element:
```js
function CountText (count) {
  const el = document.createElement('span');
  el.innerText = "Count :" + count;
  return el;
}

function Button (text, onClick) {
  const btn = document.createElement('button');
  btn.innerText = "Reverse Order";
  btn.addEventListener("click", onClick);
  return btn;
}
```

In the current state without such a primitive a dev would need to make their own group representation and special case rendering it; or special case rendering arrays and providing a way for the renderer to know when the array has changed.

With this primitive handling dynamic groups is very simple and straight forward.

```js
function List () {
  const group = document.createNodeGroup();
  const items = [];
  for (let i = 0; i < 20; i++) {
    items.push(SingleElement(i));
  }
  const reverseButton = Button("Reverse Order", () => {
    group.replaceChildren([reverseButton, ...items.reverse()]);
  });
  group.replaceChildren([reverseButton, ...items]);
  return group;
}

function Parent (children) {
  const el = document.createElement('div');
  for (const child of children) {
    // NodeGroup can be appended just like any other element
    el.appendChild(child);
  }
  return el;
}

root.insertBefore(Parent([CountText(-1),List(),CountText(100)]));
```

I've tried very hard to see how DOM Parts would be able to solve the problem without also needing to special case and wrap groups (even in a big framework), but since ChildNodePart is owned by it's parent I don't think it's possible. NodeGroup being self owned (like DocumentFragment) and movable makes these kind of things possible.


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

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