Templates

Escape hatches

The renderer owns the DOM it draws: on every change it puts the page back the way the template says. x-ignore takes a subtree out of its hands, so a chart or editor library can draw there and its DOM survives a re-render.

x-ignore

<div x-data="{ n: 0 }" class="">
  <div class="">
    <button @click="n++" class="">Re-render</button>
    <button
      @click="const box = $event.target.closest('.keep-mount-demo').querySelector('.keep-mount');
              box.append(' widget ' + box.childNodes.length)"
      class=""
    >Add widget (3rd-party DOM)</button>
    <span class="">re-renders: <span class="" x-text="n"></span></span>
  </div>
  <div x-ignore class="">3rd-party DOM lands here:</div>
  <p class="">Add a few widgets, then hit Re-render: the x-ignore box keeps them.</p>
</div>

Result

re-renders: 0

3rd-party DOM lands here:

Add a few widgets, then hit Re-render: the x-ignore box keeps them.

x-cloak hides an element until the page is live in the browser; pair it with a [x-cloak]{display:none} rule.
x-debug="value" prints a value's shape while you build a page.
An attribute the renderer does not know, like data-analytics="cta", is written to the page as it is.