bind

Spread attributes

{
  class: "message",
  style: "white-space:pre-wrap;",
  text: "Hello John!"
}

<h1 bind:>Hello World!</h1>

Result:

<h1 class="message" style="white-space:pre-wrap;">Hello John!</h1>

Very useful with custom tags

With the following tag in your HTML template:

<template id="my-button">
  <button class="btn btn-" class:="btn" text:="text" click:="click">
    <slot></slot>
  </button>
</template>

Render this:

[
  {
    btn: "secondary",
    text: "Cancel",
    click: (ev) => {
      ev.target.textContent = 'canceled!';
    }
  },
  {
    btn: "primary",
    text: "Submit",
    click: (ev) => {
      ev.target.textContent = 'submited!';
    }
  }
]

<my-button each: bind:></my-button>

Result:

<button class="btn btn-secondary">Cancel</button>
<button class="btn btn-primary">Submit</button>

After clicking on the two buttons:

<button class="btn btn-secondary">canceled!</button>
<button class="btn btn-primary">submited!</button>