DOM content inside a <template if:true={condition}>...</template> is not cleared...

[jye-sf]

Description

DOM content inside an if:true directive is not cleared when a specific set of directives are nested inside. Two nested if:true directives work fine, but adding a for:each directive inside the inner if:true directive breaks the top-most if:true.

<!-- cleared properly -->
<template>
    <template if:true={hasValue}>
        <template if:true={nestedValue}>
            <div class="slds-p-around_x-large">
                <lightning-button label='Toggle HasValue' onclick={toggleHasValue}>
                </lightning-button>
            </div>
        </template>
    </template>
</template>

<!-- not cleared -->
<template>
    <template if:true={hasValue}>
        <template if:true={nestedValue}>
            <template for:each={addressLines} for:item="line">
                <div key={line} class="slds-truncate">
                    {line}
                </div>
            </template>
            <div class="slds-p-around_x-large">
                <lightning-button label='Toggle HasValue' onclick={toggleHasValue}>
                </lightning-button>
            </div>
        </template>
    </template>
</template>

Steps to Reproduce

See playground link for steps to reproduce.

https://playground.lwcjs.org/projects/f0-19z5M6/2/edit

Expected Results

DOM content is properly cleared when condition is false.
DOM content only appears once when condition is true.

Actual Results

DOM content is not cleared when condition is false
DOM content duplicate is appended when condition is true

Browsers Affected

Tested on Chrome

Version

• LWC: 0.34.3

Possible Solution
I couldn't identify whether this was an engine or a compiler issue, but here's what's happening under the covers:

In the working scenario, the template is compiled as

return [$cmp.hasValue ? $cmp.nestedValue ? api_element("div", {
      classMap: {
        "slds-p-around_x-large": true
      },
      key: 4
    }, [api_custom_element("lightning-button", button, {
      props: {
        "label": "Toggle HasValue"
      },
      key: 5,
      on: {
        "click": _m0 || ($ctx._m0 = api_bind($cmp.toggleHasValue))
      }
    }, [])]) : null : null];

In the broken scenario, the template is compiled as

return $cmp.hasValue ? $cmp.nestedValue ? api_flatten([api_iterator($cmp.addressLines, function (line) {
      return api_element("div", {
        classMap: {
          "slds-truncate": true
        },
        key: api_key(5, line)
      }, [api_dynamic(line)]);
    }), api_element("div", {
      classMap: {
        "slds-p-around_x-large": true
      },
      key: 6
    }, [api_custom_element("lightning-button", button, {
      props: {
        "label": "Toggle HasValue"
      },
      key: 7,
      on: {
        "click": _m0 || ($ctx._m0 = api_bind($cmp.toggleHasValue))
      }
    }, [])])]) : [] : [];

The main difference here is that in the working scenario, the new template is returned as [null] while in the broken scenario, they're returned as [].

The children are considered static because they aren't created by an iteration:

• lwc/packages/@lwc/engine/src/framework/patch.ts

  Line 29 in 63fa434

  export function patchChildren(host: Element, shadowRoot: ShadowRoot, oldCh: VNodes, newCh: VNodes, isFallback: boolean) {

  
  (edited: previously pointed to wrong function in hooks.ts)

snabbdom function then fails to update the children because it assumes the array lengths should be the same

• lwc/packages/@lwc/engine/src/3rdparty/snabbdom/snabbdom.ts

  Line 229 in 63fa434

  // if the old list is not empty, the new list MUST have the same

Additional context/Screenshots
This is the root cause of a high priority bug with a customer case in 218/patch. If a fix isn't easy/quick, any suggestions on a workaround we could implement on our component would be extremely helpful.

[caridy]

Very good analysis @jye-sf, you were just missing one little runtime detail that is the flag that determines whether or not a list of children should be considered dynamic or static list. That's the issue here, and the specific problem is that in the engine, we use api_flatten to signal such thing, but in this case the flattening procedure is not used for the outer array, that's why [] breaks the diffing algo.

Ideally, the compiler should provide such signal, but that's not the case today. Definition a compiler issue at this point. /cc @pmdartus @diervo

@davidturissini this is why my previous code was using a transitive check on the dynamic flag, I just could not remember the exact example, but @jye-sf just found it.

[mr2c12]

Today I came across this problem, it actually drove me crazy!
I am not able to reach the playground (maybe @jye-sf can re-upload its example?) but in my case, that was very similar to the "problematic" one, I was able to get the desired behaviour adding a static element after the root node:

<template>
    <div style="display: none"></div>
    <template if:true={hasValue}>
        <template if:true={nestedValue}>
            <template for:each={addressLines} for:item="line">
                <div key={line} class="slds-truncate">
                    {line}
                </div>
            </template>
            <div class="slds-p-around_x-large">
                <lightning-button label='Toggle HasValue' onclick={toggleHasValue}>
                </lightning-button>
            </div>
        </template>
    </template>
</template>

I cannot test this in the playground, but in my code the problem has been fixed. Sort of..