Hi,

I'm wondering how I should handle dynamically added HTML. For example:On my initially loaded page I don't have a collapse component, so there's no element with the data-mdb-collapse-init attribute. When I add dynamically HTML (either using document.createElement or Fetch API) which does contains an element with the data-mdb-collapse-init it doesn't work (isn't initialized). But, when the initially page does contain a collapse component, the component that comes from dynamically added HTML will do get initialized. The same goes for the data-mdb-ripple-init and possibly other components also.

So it seems like MDB is only observing the components that are present on the initially loaded page. So how should I handle this?

The only way I get it managed is by adding a custom Stimulus Controller to the body of my page. The Stimulus Controller instantiates a MutationObserver to detect newly added nodes and instantiate MDB Components based on the presence of the data-mdb-*-init attribute.

<!-- START: dynamic elements only work when below HTML is initially present -->
<button class="btn btn-primary mb-3" type="button" data-mdb-collapse-init data-mdb-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button
</button>
<div class="collapse" id="collapseExample">Lore Ipsum</div>
<!-- END -->

<button onclick="createUsingJS()">Create using JS</button>
<button onclick="createUsingXhr()">Create using XHR</button>

<div id="container"></div>

<script>
    async function createUsingXhr() {
        const response = await fetch('/collapse.html');
        const html = await response.text();
        document.getElementById('container').innerHTML = html;
    }

    function createUsingJS() {
        const btn = document.createElement('button');
        btn.setAttribute('class', 'btn btn-primary mb-3');
        btn.setAttribute('type', 'button');
        btn.setAttribute('data-mdb-collapse-init', '');

        btn.setAttribute('data-mdb-target', '#collapseExample2');
        btn.setAttribute('aria-expanded', 'false');
        btn.setAttribute('aria-controls', 'collapseExample2');
        btn.innerHTML = 'Foo'

        const div = document.createElement('div');
        div.setAttribute('class', 'collapse');
        div.setAttribute('id', 'collapseExample2');
        div.innerHTML = 'Bar';

        const container = document.getElementById('container');
        container.appendChild(btn);
        container.appendChild(div);
    }    
</script>