Re: [WICG/webcomponents] [dom-parts] Declarative syntax for creating DOM Parts (Issue #1003)

I'd like to propose an alternative syntax and semantics for DOM Parts that I think would:

* Work both for live templates and DSD
* Work in both templates and the document.body
* Be much more ergonomic
* Be much more familiar
* Be extensible

The idea is that we would use `{{}}` for values and `{{#tag}}{{/tag}}` for blocks. This is borrowed directly from the popular handlebars/mustache libraries.

What I propose, is to pair this with a `mode` attribute on `template` and `body` which tells the HTML runtime how to interpret the values between the open/close tags. 

In `prerender` mode, the browser would directly render the contents of the tag, as if the tag wasn't there, but it would also collect the part.

**Example 1: DSD with Parts that have literally rendered values**

```html
<template shadowrootmode="open" mode="prerender">
  This is an {{example}} of how we could use the {{same}} syntax for DSD DOM Parts as {{live}} templates.
  <a href="./some/{{link.html}}">We can even use it in attributes.</a>
  {{#tag}}
    <div>
      Nested parts {{work fine}} too!
    </div>
  {{/tag}}
</template>
```

**Example 2: Server rendered parts in the body.**

```html
<body mode="prerender">
  This should also work in the {{body}}.
</body>
```

In the above examples, the content between `{{}}` and `{{#tag}}{{/tag}}` would be literally rendered by the browser. The curlys themselves would be removed. As part of this process, the parts would be captured and stored with the template/body for use later by libraries.

**Example 3: Live templates with bindings**

```html;
<template mode="live">
  This is an {{this.example}} of how we could use the {{this.same}} syntax for DSD DOM Parts as {{this.live}} templates.
  <a href="./some/{{this.link}}">We can even use it in attributes.</a>
  {{#tag}}template#myTemplate{{/tag}}
</template>

<template id="myTemplate" mode="live">
  <div>
      Nested parts {{this.workFine}} too!
  </div>
</template>
```

**Example 4: Live body with bindings**

```html
<body mode="live">
  This should also work in the {{this.foo}}.
</body>
```

In the above examples, the browser would not render the content between `{{}}` and `{{#tag}}{{/tag}}. It would simply extract the parts, and store the content of the tags on the part itself, for further processing by the library/framework. The content is open for interpretation by the chosen library.

In the future, once the reactivity model, expression syntax, block rendering (conditional, list, etc.) are all worked out, we can add a new `mode` value that adds the additional behavior of setting up bindings against the parts and automatically handling updates.

I can't claim to have worked out all the edge cases here, but I wanted to drop this in the issue to help move the conversation along more. In our Spring F2F @rniwa thought that there might be a way to support `{{}}` in the body and there was also discussion indicating that it would be nice to have a single syntax for parts in both the DSD and live contexts.

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

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

Received on Tuesday, 2 May 2023 14:54:44 UTC