Implement InnerTemplatePart class
#75
Merged
+72
−9
Conversation
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
The [3.3. Conditionals and Loops using Nested Templates][] section of
the specification mentions special treatment of `<template>` elements
with `[directive]` and `[expression]` attributes within `<template>`
elements. They're to be treated as parts of their own, represented by an
`InnerTemplatePart` interface:
```ts
InnerTemplatePart : NodeTemplatePart {
HTMLTemplateElement template;
attribute DOMString directive;
}
```
This commit introduces that class, along with special treatment whenever
collecting parts from an `HTMLTemplateElement` that also has a
`[directive]` attribute.
To demonstrate their utility, this commit includes a test case that
exercises a naive implementation of an `if` conditional. As a caveat,
it's worth mentioning that the specification proposal explicitly
mentions the nuance surrounding looping and conditional rendering:
> this approach involves the template process callback cloning template
> parts along with other nodes, or let author scripts manually specify to
> which element each template part belongs. This quickly becomes an
> entangled mess because now we could have multiple template parts that
> refer to a single DOM location or an attribute, and we have to start
> dealing with multiple template parts trying to override one another even
> though there is no good use case for such a behavior.
>
> We like the idea of supporting very basic control flow such as `if` and
> `foreach` in the default template process callback but we don't think it's
> a show stopper if the default template process callback didn't support
> them in the initial cut.
This commit does not aim to introduce a canonical implementation for
conditionals or looping, but it should enable a change like that in the
future.
[3.3. Conditionals and Loops using Nested Templates]: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md#33-conditionals-and-loops-using-nested-templates
seanpdoyle
force-pushed
the
inner-template-part
branch
from
b3da3df to
8aba104
Compare
seanpdoyle
commented
Dec 13, 2024
Comment on lines
+13
to
+18
| if (node.hasAttribute('directive')) { | ||
| yield new InnerTemplatePart(node) | ||
| } else { | ||
| for (const part of collectParts(node.content)) { | ||
| yield part | ||
| } |
There was a problem hiding this comment.
@keithamus Should this conditional be flattened to treat all HTMLTemplateElement instances as InnerTemplatePart instances?
That way, ww could migrate the current collectParts behavior into this package's built-in processors while still enabling consumers that provide their own custom processors with an integration seam to handle <template> elements however they see fit.
I'm not entirely sure what the change would look like in the processors themselves. Maybe it'd be best to follow this change up with that exploration separately?
There was a problem hiding this comment.
Yes I agree, let's follow up separately.
There was a problem hiding this comment.
Thank you for the review! I've opened #76 to remove the special-casing and make InnerTemplatePart available to custom processors.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The 3.3. Conditionals and Loops using Nested Templates section of the specification mentions special treatment of
<template>elements with[directive]and[expression]attributes within<template>elements. They're to be treated as parts of their own, represented by anInnerTemplatePartinterface:This commit introduces that class, along with special treatment whenever collecting parts from an
HTMLTemplateElementthat also has a[directive]attribute.To demonstrate their utility, this commit includes a test case that exercises a naive implementation of an
ifconditional. As a caveat, it's worth mentioning that the specification proposal explicitly mentions the nuance surrounding looping and conditional rendering:This commit does not aim to introduce a canonical implementation for conditionals or looping, but it should enable a change like that in the future.