Skip to content

Commit

Permalink
DOM Parts Proposal Additions (#1015)
Browse files Browse the repository at this point in the history
* Split DOM Parts proposal for move into imperative document.

1. A new motivation section
2. New option for groups
3. New option for clone.
4. New option for partial attribute

* Move imperative parts of DOM-Parts.md to DOM-Parts-Imperative.md

Reorganize sections to put groups and cloning first.

* Introduce a declarative DOM parts proposal for <template>

* kenchris@ review.

Fix typo, rename PartialAttributePart to AttributePartFragment.
  • Loading branch information
tbondwilkinson authored Jul 24, 2023
1 parent 60c9f68 commit 1b75f75
Show file tree
Hide file tree
Showing 3 changed files with 778 additions and 512 deletions.
73 changes: 73 additions & 0 deletions proposals/DOM-Parts-Declarative-Template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
# DOM Parts Declarative Template API

This proposal covers the declarative API for creating a DOM part within a
`<template>` element.

## Proposal

Double curly braces `{{}}` provide markers for DOM parts.

In the most basic level, this proposal can produce the three DOM parts:
`NodePart`, `AttributePart`, `ChildNodePart`.

### Basic Examples

Suppose we had the following template in some HTML extension template languages
where `{name}` and `{email}` indicated locations of dynamic data insertion:

```html
<section>
<h1 id="name">{name}</h1>
Email: <a id="link" href="mailto:{email}">{email}</a>
</section>
```

And the application has produce a template with the following content:

```html
<template>
<section>
<h1 id="name">{{}}</h1>
Email: <a id="link" href="{{}}">{{}}</a>
</section>
</template>
```

This will create a `ChildNodePart` attached to `<h1>` with no content, a
`NodePart` attached to `<a>`, and an `AttributePart` connected to `href`.

A framework could fetch these parts use either a
[`DocumentPart`](./DOM-Parts-Imperative.md#option-2-documentpartgroup) on the
`DocumentFragment` produced by the template.

## `PartialAttributePart`

Allowing `{{}}` inside an attribute with some static content raises the same
question as a
[`PartialAttributePart`](./DOM-Parts-Imperative.md#partial-attribute-updates),
but if the imperative questions are resolved so too could the declarative
template syntax.

## Metadata

Templating systems may need to serialize data about the nodes they are marking
into the processing instructions. Or at the very least parts could be named so
that they are easier to fetch.

```html
<div>{{email data="foo"}}</div>
```

This could be exposed on the imperative API to be consumed in JavaScript by
application logic.

## Choice of marker

The `{{}}` is a reasonable DOM part marker, but it could be something else, or
it could even be something that is declared as the placeholder.

## Compatability

It may be challenging to implement `<template>` parsing of `{{}}` for
compatability reasons, so there may need to be restrictions such as only
allowing this template syntax in a new API like `createTemplateWithParts()`.
Loading

0 comments on commit 1b75f75

Please sign in to comment.