[lit-html] Curly brackets {{text.}} are effective in templates

[t2ym]

• [lit-html] Curly brackets {{text.}} are effective in templates

Root Cause

• Polymer template formats are used internally

Notes

• This is not an issue but an internal gimmick, while depending on this behavior may be risky.
• Effective Patterns as of 3.0.0-pre.26-lit-html.18
  • {{text.id}} - almost equivalent to ${this.text.id}
  • {{model.id}} - almost equivalent to ${this.text.model.id}
  • {{serialize(text.id)}} - almost equivalent to ${JSON.stringify(this.text.id)}

Examples

return html`${bind(this)}
  <i18n-format id="compound-format-text" class="text">
    <json-data>{
      "0": "No timezones",
      "1": "Only 1 timezone for {2} is shown.",
      "one": "{1} timezone other than {2} is shown.",
      "other": "{1} timezones other than {2} are shown."
    }</json-data>
    <i18n-number offset="1">${this.timezones.length}</i18n-number>
    <span>${'GMT' + (this.timezones[0] < 0 ? '' : '+') + (this.timezones[0] / 60)}</span>
  </i18n-format>
  <div>{{text.compound-format-text.0.0}}</div>
  <div>{{text.compound-format-text.0.1}}</div>
  <div>{{text.compound-format-text.0.one}}</div>
  <div>{{text.compound-format-text.0.other}}</div>
  <data-processor-element .data={{text.compound-format-text}}></data-processor-element>
`;