Suppose I have an Alpine.js component like this:
<div x-data="{
state: some_state,
do_something: function() {
}
}">
</div>
If I display a page containing this component, and subsequently remove the component from the DOM, are any resources left dangling?
I am using an architecture where "pages" (html fragments downloaded from a server) get swapped in and out of a content area on my actual HTML page. (I'm using HTMX to do this, but that's not particularly important). Can I have an arbitrarily large UI surface area, one "page" at a time, without eating up browser resources?
I'm conscious, for example, that if I did this:
<div x-data="{
delegate: delegate
}">
</div>
<script>
let delegate = {
state: some_state,
do_something: function() {...}
}
</script>
... that now my delegate object would pollute the global namespace and would not go way if the HTML component is detached.
