From bd77c5c2b4c6dc1412623b1394f1781ad6ef1709 Mon Sep 17 00:00:00 2001 From: Austin Andrews Date: Thu, 16 Jan 2020 12:40:58 -0600 Subject: [PATCH 01/10] init --- text/0000-partial-template.md | 100 ++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 text/0000-partial-template.md diff --git a/text/0000-partial-template.md b/text/0000-partial-template.md new file mode 100644 index 00000000..ab53b45b --- /dev/null +++ b/text/0000-partial-template.md @@ -0,0 +1,100 @@ +--- +title: Partial Template +status: DRAFTED +created_at: 2020-01-16 +updated_at: 2020-01-17 +pr: (leave this empty until the PR is created) +--- + +# Short Title + +## Summary + +Partial templates allow the ability to import html templates into another template via +the normal variable syntax `{template}`. + +## Basic example + +```js +import partialTemplate from './partialTemplate.html'; + +export default class Example extends LightningElement { + partialTemplate = partialTemplate; +} +``` + +```html + +``` + +## Motivation + +In investigating performance issues in components that are used hundreds of times on a +page it was noted that creating reusable child components; while organizationally nice, +were not as performant as inlining the HTML into the template; + +In other instances it was noted that large conditonal blocks of HTML could be more organized +into seperate template files. + +## Detailed design + +Templates can be rendered into a component one of two ways currently. + +- By matching the name of the component. Ex: `cmp.js` / `cmp.html` +- By returning a default import in the `render() {}` method. + - Ex: `import cmpTemplate from './cmp.html'` -> `render() { return cmpTemplate; }` + +A template is a constant and cannot be modified. Partials will inherit this same behavior. + +This simplifies things, but still may lead to complications in optimizations [unfamiliar with +what this entails, so may need LWC context here]. Example: + +``` +get dynamicTemplate() { + return this.conditonal ? template1 : template2; +} +``` + +## Drawbacks + +Why should we *not* do this? Please consider: + +- Conditionally swapping out partial templates could be performantly bad in themselves negating + the benfit if we're not able to optimize for this. +- Recursion good/bad. + +> Note: Developers coming from other frameworks would expect this to work this way. + +## Alternatives + +The other design choice would be to compile time import via an include syntax. + +``` + +``` + +This syntax greatly cuts down on what would be possible and introduces verbose +conditional blocks of `if:true` that could lend themselves to unnecessary rerenders. + +## Adoption strategy + +Since this is not a breaking change an an enhancement the adoption should be smooth as devs +are informed this feature was added and can now reorganize existing templates. + +In the examples above we may want to recommend reoganization of existing components if one was +currently nesting components. + +# How we teach this + +For any developer coming from JSX environment this pattern is already normal practice. Showing a +simple example is enough to explain how partials work. + +Currently a developer would assume this syntax would include a partial and not `.toString()` the +JS template function. + +# Unresolved questions + +- As with all feature this will depend heavily on performance. From 6437ca5f8a4aba5605aa1e6c49db98c04faf37c2 Mon Sep 17 00:00:00 2001 From: Austin Andrews Date: Thu, 16 Jan 2020 12:50:37 -0600 Subject: [PATCH 02/10] wording --- text/0000-partial-template.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/text/0000-partial-template.md b/text/0000-partial-template.md index ab53b45b..d911c073 100644 --- a/text/0000-partial-template.md +++ b/text/0000-partial-template.md @@ -81,11 +81,12 @@ conditional blocks of `if:true` that could lend themselves to unnecessary rerend ## Adoption strategy -Since this is not a breaking change an an enhancement the adoption should be smooth as devs -are informed this feature was added and can now reorganize existing templates. +Since this is not a breaking change and purely an enhancement to an existing syntax developers +adoption will be optional. If they decide to reorganize existing components they'll go in with +expectations partials are the way going forward to make complex templates more readable. In the examples above we may want to recommend reoganization of existing components if one was -currently nesting components. +currently heavily nesting components. # How we teach this From 33c8779ed2833d861dcf49287b8d85efae81c2c5 Mon Sep 17 00:00:00 2001 From: Austin Andrews Date: Fri, 17 Jan 2020 12:03:37 -0600 Subject: [PATCH 03/10] Update title. --- text/0000-partial-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/text/0000-partial-template.md b/text/0000-partial-template.md index d911c073..ebfeb90c 100644 --- a/text/0000-partial-template.md +++ b/text/0000-partial-template.md @@ -6,7 +6,7 @@ updated_at: 2020-01-17 pr: (leave this empty until the PR is created) --- -# Short Title +# Patial Template ## Summary From 707b27eb6d5579aa6e4bacdaf73b388ed0626baa Mon Sep 17 00:00:00 2001 From: Austin Andrews Date: Fri, 17 Jan 2020 12:05:14 -0600 Subject: [PATCH 04/10] Drawback. --- text/0000-partial-template.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/text/0000-partial-template.md b/text/0000-partial-template.md index ebfeb90c..de463426 100644 --- a/text/0000-partial-template.md +++ b/text/0000-partial-template.md @@ -62,6 +62,8 @@ get dynamicTemplate() { Why should we *not* do this? Please consider: +- Static analysis. Analyzing the template can give us a lot of information, but with something + like this, it makes it harder - Conditionally swapping out partial templates could be performantly bad in themselves negating the benfit if we're not able to optimize for this. - Recursion good/bad. From 32de1e81885df5db7eac84c2aeaf3be7f5664edd Mon Sep 17 00:00:00 2001 From: Austin Andrews Date: Fri, 17 Jan 2020 14:52:20 -0600 Subject: [PATCH 05/10] Rewrite alterntives section. Remove performance from motivation. --- text/0000-partial-template.md | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/text/0000-partial-template.md b/text/0000-partial-template.md index de463426..4e088555 100644 --- a/text/0000-partial-template.md +++ b/text/0000-partial-template.md @@ -32,10 +32,6 @@ export default class Example extends LightningElement { ## Motivation -In investigating performance issues in components that are used hundreds of times on a -page it was noted that creating reusable child components; while organizationally nice, -were not as performant as inlining the HTML into the template; - In other instances it was noted that large conditonal blocks of HTML could be more organized into seperate template files. @@ -63,7 +59,7 @@ get dynamicTemplate() { Why should we *not* do this? Please consider: - Static analysis. Analyzing the template can give us a lot of information, but with something - like this, it makes it harder + like this, it makes it more difficult. - Conditionally swapping out partial templates could be performantly bad in themselves negating the benfit if we're not able to optimize for this. - Recursion good/bad. @@ -72,10 +68,24 @@ Why should we *not* do this? Please consider: ## Alternatives -The other design choice would be to compile time import via an include syntax. +Partials imported via the `template` tag and `lwc:partial` attribute. + +- Introduce `lwc:partial="./file.html"` for compiled time content. +- Scoped `{variables}` within templates passed via attributes. +- Question: Would `lwc:partial={templateUrl}` not work? What about `lwc:partial={template}` via + an `import`. ``` - +// foo.html + + +// component.html + ``` This syntax greatly cuts down on what would be possible and introduces verbose From 4272fd7288387cf4744f12fcc9ff168df32211ef Mon Sep 17 00:00:00 2001 From: Austin Andrews Date: Thu, 5 Feb 2026 15:31:22 -0600 Subject: [PATCH 06/10] Delete text/0000-partial-template.md --- text/0000-partial-template.md | 113 ---------------------------------- 1 file changed, 113 deletions(-) delete mode 100644 text/0000-partial-template.md diff --git a/text/0000-partial-template.md b/text/0000-partial-template.md deleted file mode 100644 index 4e088555..00000000 --- a/text/0000-partial-template.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Partial Template -status: DRAFTED -created_at: 2020-01-16 -updated_at: 2020-01-17 -pr: (leave this empty until the PR is created) ---- - -# Patial Template - -## Summary - -Partial templates allow the ability to import html templates into another template via -the normal variable syntax `{template}`. - -## Basic example - -```js -import partialTemplate from './partialTemplate.html'; - -export default class Example extends LightningElement { - partialTemplate = partialTemplate; -} -``` - -```html - -``` - -## Motivation - -In other instances it was noted that large conditonal blocks of HTML could be more organized -into seperate template files. - -## Detailed design - -Templates can be rendered into a component one of two ways currently. - -- By matching the name of the component. Ex: `cmp.js` / `cmp.html` -- By returning a default import in the `render() {}` method. - - Ex: `import cmpTemplate from './cmp.html'` -> `render() { return cmpTemplate; }` - -A template is a constant and cannot be modified. Partials will inherit this same behavior. - -This simplifies things, but still may lead to complications in optimizations [unfamiliar with -what this entails, so may need LWC context here]. Example: - -``` -get dynamicTemplate() { - return this.conditonal ? template1 : template2; -} -``` - -## Drawbacks - -Why should we *not* do this? Please consider: - -- Static analysis. Analyzing the template can give us a lot of information, but with something - like this, it makes it more difficult. -- Conditionally swapping out partial templates could be performantly bad in themselves negating - the benfit if we're not able to optimize for this. -- Recursion good/bad. - -> Note: Developers coming from other frameworks would expect this to work this way. - -## Alternatives - -Partials imported via the `template` tag and `lwc:partial` attribute. - -- Introduce `lwc:partial="./file.html"` for compiled time content. -- Scoped `{variables}` within templates passed via attributes. -- Question: Would `lwc:partial={templateUrl}` not work? What about `lwc:partial={template}` via - an `import`. - -``` -// foo.html - - -// component.html - -``` - -This syntax greatly cuts down on what would be possible and introduces verbose -conditional blocks of `if:true` that could lend themselves to unnecessary rerenders. - -## Adoption strategy - -Since this is not a breaking change and purely an enhancement to an existing syntax developers -adoption will be optional. If they decide to reorganize existing components they'll go in with -expectations partials are the way going forward to make complex templates more readable. - -In the examples above we may want to recommend reoganization of existing components if one was -currently heavily nesting components. - -# How we teach this - -For any developer coming from JSX environment this pattern is already normal practice. Showing a -simple example is enough to explain how partials work. - -Currently a developer would assume this syntax would include a partial and not `.toString()` the -JS template function. - -# Unresolved questions - -- As with all feature this will depend heavily on performance. From e8b13a78340b3ede9073689e0009cf664b403d66 Mon Sep 17 00:00:00 2001 From: Austin Andrews Date: Thu, 5 Feb 2026 15:33:29 -0600 Subject: [PATCH 07/10] Slot Assigned Nodes --- text/0000-slot-assigned-nodes.md | 82 ++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 text/0000-slot-assigned-nodes.md diff --git a/text/0000-slot-assigned-nodes.md b/text/0000-slot-assigned-nodes.md new file mode 100644 index 00000000..c2e3273b --- /dev/null +++ b/text/0000-slot-assigned-nodes.md @@ -0,0 +1,82 @@ +--- +title: Slot Assigned Nodes +status: DRAFTED +created_at: 2026-02-05 +updated_at: 2026-02-05 +pr: (leave this empty until the PR is created) +--- + +# Slot Assigned Nodes + +## Summary + +To observe slot data requires a bit of boilerplate. The goal would be to remove this boilerplate especially around conditional slot parents or nodes. + +## Basic example + +> Note: Normalize `nodes` by removing all `node.type === Node.TEXT_NODE` with `node.nodeValue === ''`. This simplifies logic for devs. +```typescript +import { LightningElement, slot } from 'lwc'; + +export default class Playground extends LightningElement { + showDefaultSlot = true; + showNameSlot = true; + + @slot() + slotDefault(nodes) { + this.showDefaultSlot = nodes.length > 0; + } + + @slot('name') + slotName(nodes) { + this.showNameSlot = nodes.length > 0; + } + + // alternatively match lit's or support both formats + @slot() + bodyNodes: Array; + + @slot('name') + nameNodes: Array; +} +``` + +template... +```html + +``` + +## Motivation + +Simplifies monitoring slots by removing boilerplate. See lit's [`queryAssignedNodes()`](https://github.com/lit/lit/blob/main/packages/reactive-element/src/decorators/query-assigned-nodes.ts) + +## Detailed design + +See: [`queryAssignedNodes()`](https://github.com/lit/lit/blob/main/packages/reactive-element/src/decorators/query-assigned-nodes.ts) + +## Drawbacks + +Why should we *not* do this? Please consider: + +- implements another decorator for something that can be done with a few lines of code. +- devs may also request `queryAssignedElements()`. + +## Alternatives + +Alternatively one could also support `