[WICG/webcomponents] [dom-parts] Tree structure of parts in the DOM (Issue #992)

@justinfagnani @mfreed7 @sorvell @kevinpschaaf and a few folks from Angular have been thinking about the DOM parts API fresh.

In the current DOM parts proposal, there's no concept of being able to walk a "tree" of parts in the DOM. Because users create part objects, they're mostly used as an update mechanism rather than a structural mechanism.

Considered with #990, if DOM parts are something that is attached to the DOM and can be constructed by the browser, it makes sense to propose that parts should also form a tree structure and each part should have a parent and children.

# Updating a subtree of the DOM

If the only place to get parts for the document is to call `getParts()` on the `DocumentPart`, it's much more difficult to do a partial render update for only a portion of the subtree. If a `ChildNodePart` has a `getParts()` method, it's easier for that portion of the tree to be walked and updated independently. Most frameworks do not walk the entire document on every update, and allow partial rendering and skipping rendering for subtrees.

# Nested templates

This becomes even more important for templating approaches that can be nested.

```html
<html>
  <?node-part classes>
  <div id="parent">
    <?node-part src?>
    <div id="icon">
    </div>
    <?child-node-part content?>
    <div>
      Pre-content
     <?child-node-part greeting?>
     <span>Hello there, <?child-node-part name/?><span>
     <?/child-node-part?>
     Post-content
    </div>
    <?/child-node-part?>
  </div>
</html>
```

This might be HTML generated for template with nesting 

```ts
function page(name: JSX.Element, src: string) {
  const greeting = <span>Hello there, {name}</span>;
  const content = <div>Pre-content {greeting} Post-content</div>;
  const html = (
      <html>
        <div id="icon" src={src}><div>
        <div id="parent" {classes}>
          {content}
        </div>
      </html>);
}
```

If `ChildNodePart` can also be a `PartRoot` with a `getParts()` method, then each nested `<template>` can be the part container for its parts and can be walked independently of the rest of the DOM.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/992
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/992@github.com>

Received on Tuesday, 21 March 2023 19:52:25 UTC