How are Bootstrap JS instances stored in DOM elements?

[o-alquimista]

When you call getInstance or getOrCreateInstance on an HTML element, where is the instance coming from?

It's just for curiosity. I couldn't figure that out searching through the source code.

---

Also, what happens to the instance when you remove the element from the DOM? Is it garbage-collected?

[wesleysmyth]

Bootstrap 5 uses a nested Map structure in its internal Data module (src/dom/data.js). Here's how it works:

Map<HTMLElement, Map<string, ComponentInstance>>

• The outer Map is keyed by DOM elements
• The inner Map is keyed by a component name string (e.g. "bs.modal", "bs.tooltip")
• Each element can only have one instance per component type

When you call Modal.getInstance(element), it looks up the element in the outer Map, then retrieves the "bs.modal" entry from the inner Map. getOrCreateInstance does the same but creates a new instance if one doesn't exist.

Garbage collection — the important part

No, instances are NOT automatically garbage-collected when you remove the element from the DOM. Since Bootstrap uses a regular Map (not WeakMap), it holds a strong reference to the element, which prevents the garbage collector from reclaiming either the element or the instance.

If you remove an element without calling .dispose() first, you'll leak memory. This matters in SPAs or any scenario where you're dynamically adding/removing elements. Always call dispose() before removing the element:

const modal = bootstrap.Modal.getInstance(element);
if (modal) modal.dispose();
element.remove();

dispose() removes the entry from the data store, tears down event listeners, and makes both the element and instance eligible for GC.

Why not WeakMap? A WeakMap would allow automatic cleanup, but Bootstrap needs to iterate over stored instances in some cases (e.g., closing all open dropdowns), which WeakMap doesn't support since it's not enumerable.

[o-alquimista]

Thanks for explaining it in detail. So, the Bootstrap instances are not stored, somehow, in the DOM elements themselves (which is the stupid idea I had); it's the other way around: the active HTML elements are referenced in a JavaScript object (Map) that can be looked up when needed.

No, instances are NOT automatically garbage-collected when you remove the element from the DOM.

I was already calling dispose before removing, but it's good to know.

Are you a contributor? I couldn't find you in the contributor list.