Explicit Mount Target

[jonnitto]

It would be great if it would be possible to specify a mount target (selector or element) to limit AlpineJS to only that region of the page:

Alpine.start('#only-this-div')

This also means you can have multiple apps to control different regions on the same page:

Alpine.start('#app1')
Alpine.start('#app2')

This idea is borrowed from Petie-Vue, but I think it would be really usefull, especially if you have user-generated content on the page.

[KevinBatdorf]

Alpine only searches for x-data or x-init though, right? What would this solve that you couldn't do now?

Is it about watching the entire DOM for changes (which looks for freshly inserted components)? In V2 you could pause that global observer but maybe not in V3.

[luizbills]

Actually, you can use that snippet:

function loadAlpineComponent (selector, component) {
  const el = document.querySelector(selector);
  const uid = "data" + Math.round(Math.random() * Date.now());
  component = component || (() => ({}))

  if (!el) throw new Error("Invalid element selector: " + selector)

  el.setAttribute("x-data", uid);
  Alpine.data(uid, component);
  Alpine.initTree(el); // requires Alpine 3.2+
};

// usage
const data = () => ({
  foo: 'bar',
});
loadAlpineComponent("#test", data)