Bootstrap 5 Data‑Attribute Migration: Auto‑Initialize vs Explicit Component Management

When upgrading from Bootstrap 4 to 5, the data‑attribute API changes from data-toggle to data-bs-toggle and the JavaScript plugins are now vanilla‑JS classes exposed on the global bootstrap namespace. The framework still supports auto‑initialization of components via data attributes, but developers can also instantiate components explicitly with new bootstrap.Modal(element) or bootstrap.Modal.getInstance(element). In many projects, new UI elements are injected dynamically via AJAX or client‑side rendering, raising the question of whether the auto‑initialization logic will catch these elements or if explicit initialization is required. Additionally, using both mechanisms simultaneously can lead to duplicate event listeners or state inconsistencies if not carefully coordinated.

Given this dual initialization model, the key concern is how to reliably ensure that all modals, tooltips, and other components function correctly when new content is added after the initial page load. The decision also affects maintainability, performance, and compatibility with legacy code that still relies on jQuery‑based plugins.

Will auto‑initialization via data‑attributes correctly handle elements added after page load? What is the recommended approach for ensuring newly injected modals are initialized without duplicating event handlers? Does explicit instance creation interfere with data‑attribute auto‑initialization when both are used in the same application?