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

Branched from #999 

@bahrus `<template>` is more oriented towards populating a piece of HTML that can be later cloned by JavaScript. It does not seem fit to indicate nodes of interest.

There are few concerns with using any sort of Node (`<template>` or otherwise) to mark ranges. Using a new Node, and nesting child nodes in that node, modifies the DOM structure in more meaningful ways than adding PI/comments. If the node(s) of interest are now children of some other node, they are no longer children of their parent in the desired rendered output. Imagine a list where only one child is dynamic - if that child and no others are nested in another Node, your CSS selectors become quite a bit more difficult to implement. Today, applications do not nest their dynamic content in special nodes, so introducing a new node and nesting any dynamic content is probably a non-starter for most applications, which makes it a non-starter.

My general concern with `<template>` in particular is that although in this case we're using the same word, "template" in `<template>` means a template of HTML that can be cloned and updated. "template" in DOM parts refers to a user-authored template that has dynamic content. I would hesitate to represent a dynamic content point with `<template>`, as it just doesn't feel like a good fit for that language feature.

Other comments below.

A. `Hello, <?child-node name?>Adam<?/child-node?>`

With the minor nit that processing instructions are not HTML elements and so therefore do not have end tags like a normal element would, and also do not have attributes like a normal element would, yes this is the current proposal. I've slightly corrected your example.

B. `Hello <template prop=name start/>Adam<template end/>`

FYI the syntax for ending `<template>` nodes is `</template>` not `<template end/>`.

Non-declarative `<template>` elements do not render in the DOM initially, they require JavaScript to clone and insert into the DOM, see the example [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#examples). So by using a `<template>`, you wouldn't render "Adam". If you wanted to render "Adam", or some other dynamic value in that position, in your case you would need to locate the `<template>` and then prepend or append the content before or after the template. That seems like an odd API, and prevent server-side rendered content from being rendered until JavaScript has had the chance to do that hydration, which isn't ideal. If the browser would render "Adam", that of course breaks the `<template>` spec. If we make `<template>` have a new mode where "Adam" is rendered... why would we use `<template>` at all in that case.

Caveat that declarative shadow DOM does declaratively insert `<template>` and its content, but that's probably a tangent.

C. `Hello <template prop=name node-count=1 level=0/>Adam`

`<template>` nodes need to be closed, so I'm not sure how you're imagining this would work.

D. `Hello <?child-node prop=name node-count=1 level=0 ?>Adam`

This is in theory possible but requires a lot of book keeping to continually update the `node-count` attribute after any content change. You can imagine examples where a range is replaced by a series of nodes, rather than just one. I'm not sure what "level" here indicates.

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

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