-
Notifications
You must be signed in to change notification settings - Fork 375
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DOM Parts] Add new declarative syntax and update iterative proposal #1023
Open
tbondwilkinson
wants to merge
2
commits into
WICG:gh-pages
Choose a base branch
from
tbondwilkinson:pr-iteration
base: gh-pages
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+285
−331
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,131 @@ | ||
# DOM Parts Declarative API | ||
|
||
This proposal covers the declarative API for creating a DOM part within a | ||
`<template>` element and main document HTML. | ||
|
||
## 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 produced an HTML `<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, an | ||
`AttributePart` connected to `href`, and a `ChildNodePart` connected to `<a>` | ||
with no content. | ||
|
||
A framework could fetch these parts using the `getPartRoot()` on the | ||
[`DocumentFragment`](./DOM-Parts-Imperative.md#retrieving-a-documentpartroot) | ||
and then calling [`getParts()`](./DOM-Parts-Imperative.md#getparts). | ||
|
||
## Enablement | ||
|
||
For any DOM node, including `<template>`, a new `parseparts` attribute is | ||
introduced that indicates to the parser it should parse DOM part tags as DOM | ||
parts. | ||
|
||
```html | ||
<div parseparts></div> | ||
``` | ||
|
||
Even for `innerHTML` use cases, only DOM nodes that are wrapped DOM with the | ||
`parseparts` attribute will use declarative parts. | ||
|
||
## Node parts | ||
|
||
For node parts, a `{{}}` tag could be provided as an attribute. | ||
|
||
```html | ||
<template> | ||
<section {{}}></section> | ||
</template> | ||
``` | ||
|
||
Would create a `NodePart` for `<section>`. | ||
|
||
## Partial attributes | ||
|
||
Allowing `{{}}` inside an attribute works the same as a | ||
[partial attribute update](./DOM-Parts-Imperative.md#partial-attribute-updates), | ||
in that it will create an `AttributePart` for the entire attribute, but it will | ||
have multi-valued `value` property. | ||
|
||
```html | ||
<template> | ||
<section> | ||
<h1 id="name">{{}}</h1> | ||
Email: <a id="link" href="mailto:{{}}">{{}}</a> | ||
</section> | ||
</template> | ||
``` | ||
|
||
The `AttributePart` for `href` would have `statics` equal to `['mailto:', '']`. | ||
Empty string values are provided for any markers without default content. | ||
|
||
## Default Values | ||
|
||
To provide default values for any part, a part can be split into a start `{{#}}` | ||
and finish `{{/}}` indicators. | ||
|
||
```html | ||
<template> | ||
<section> | ||
<h1 id="name">{{#}}Ryosuke Niwa{{/}}</h1> | ||
Email: | ||
<a id="link" href="mailto:{{#}}[email protected]{{/}}"> | ||
{{#}}[email protected]{{/}} | ||
</a> | ||
</section> | ||
</template> | ||
``` | ||
|
||
## Names and 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. | ||
|
||
For parts that are split between opening and closing, it's possible to have | ||
multiple metadata values which are included as two elements in the `metadata` | ||
field. | ||
|
||
``` | ||
{{# metadata1}}default value{{/ metadata2}} | ||
``` | ||
|
||
## Choice of marker | ||
|
||
The `{{}}` and `{{#}}{{/}}` are reasonable DOM part markers, but this is open to | ||
proposals. It's possible to even allow the page to decide ewhat their markers | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: s/ewhat/what |
||
should be. |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feel free to punt, but have we considered giving the metadata as a string rather than a string array? People may want to use a variety of metadata encodings, e.g. JSON, and it'd be easier to just pass along the raw contents and let them split by spaces if they'd like to do that.
Related, but we'll want to specify how to escape
}}
inside of part syntax, and how to escape{{
insideparsepart
htmlThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh yeah it's not clear, but the reason metadata is a string is not because we split the string, it's because you might actually have metadata in two places for the same part.
I'll call this out.