html

Description

Tagged templates describe markup. The result is a value, so it can be stored in a variable, placed in an array, or returned from a function. Templates in the same position reuse their structure and update only the expressions that changed.

Expression Positions

• Text position — string, number, template, or array of templates
• attr=${…} — HTML attribute (converted to a string)
• .prop=${…} — DOM property (used as-is)
• ?attr=${…} — boolean attribute present only when truthy
• @event=${…} — event listener

Example

html`
  <button ?disabled=${busy()} @click=${submit}>
    ${busy() ? 'Sending' : 'Send'}
  </button>
`;

Caution

Strings are always inserted as text. If you need to insert trusted HTML, use unsafeHtml() explicitly, and never use it with user input.