function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Kurt FairfieldKurt Fairfield 

why is a second template tag with directive required to make this component render?

Can anyone tell me why I need to surround this property bind with a second template tag with directive to make this simple component render on the Account record page. Basically, if I remove the inner template tag, or even just it's directive, the component doesn't render at all (also caused other LWC custom components on the page to also not render)

HTML (works)
<!-- Template Syntax Test -->
<template>
    <template if:true={account.data}>
        <p>Account Name is {name}</p>
    </template>
</template>
JS
import {LightningElement, wire, api} from 'lwc';
import {getRecord} from 'lightning/uiRecordApi';

const
    FIELDS = [
        'Account.Name'
    ];

export default class TemplateSyntaxTest extends LightningElement {
    @api recordId;

    @wire(getRecord, {recordId: '$recordId', fields: FIELDS})
    account;

    get name() {
        return this.account.data.fields.Name.value;
    }
}
The following HTML does not render anything at all...
<!-- Template Syntax Test -->
<template>
    <p>Account Name is {name}</p>
</template>
Any ideas?