Surface - A component-based library for Phoenix LiveView

One is basically an attribute on a single element. The other can encapsulate many elements.

<button :if={@show_button}>
  Button and everything inside hidden if falsy.
</button>

<div>
  Never hidden
</div>

Versus

{#if @show_button}
  <button>
    Hidden if falsy
  </button>

  <div>
    Also hidden if falsy
  </div>
{/if}
1 Like