This proposal covers the declarative API for creating a DOM part within a
<template>
element.
Double curly braces {{}}
provide markers for DOM parts.
In the most basic level, this proposal can produce the three DOM parts:
NodePart
, AttributePart
, ChildNodePart
.
Suppose we had the following template in some HTML extension template languages
where {name}
and {email}
indicated locations of dynamic data insertion:
<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:
<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
on the
DocumentFragment
produced by the template.
Allowing {{}}
inside an attribute with some static content raises the same
question as a
PartialAttributePart
,
but if the imperative questions are resolved so too could the declarative
template syntax.
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.
<div>{{email data="foo"}}</div>
This could be exposed on the imperative API to be consumed in JavaScript by application logic.
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.
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()
.