Common gotchas

• Configuring boolean properties

  For a Boolean property to be configurable from markup, it must default to false. If it defaults to true, you cannot set it to false from markup, since the presence of the attribute, with or without a value, equates to true. This is the standard behavior for attributes in the web platform.

  If this behavior doesn't fit your use case, you can use a string-valued or number-valued attribute instead.

• Adding HTML text input in storybook knobs

1. Create text type input:

    const content = text('content', '<h1>Content Title</h1>');

2. Set escapeHTML to false in withKnobs decorator:

   .addDecorator(withKnobs({escapeHTML: false}))

3. Pass the variable like html([content]) to parse the string in lit-html:

    return html`
      <ts-card ?rtl="${rtl}"  type="${type}" size="${size}" orientation="${orientation}">
        ${html([content])}
      </ts-card>
     `;

• Add reflect: true for all properties

  If you set the value of an attribute like this:

   const el = document.createElement('ts-list-item');
   el.title = 'Sample title';
   el.disabled = boolean('disabled', false);

  then the changes wouldn't show up in the html!

• Pass data to the event handler

  If you want to dynamically generate template and having a event listener:

  /* eslint-disable lit/no-template-bind */
  return html`
     <button @click="${() => this.tabClickHandler(tab, index)}"></button>
  `;
  /* eslint-enable */