Getting instance of the component via DOM element

[cadday]

Hello,

Thanks for the awesome job with the new version. We have started to migrate from v4 and stumbled upon a problem.

We are looking for the right way to get the component instance by using the DOM element.

1. We could get the instance of the component in v4. (https://codepen.io/cadday/pen/KKNRvPE)

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

jQuery('.dropdown-toggle').dropdown('show');

2. Now with the new one we can't. (https://codepen.io/cadday/pen/QWGrgqr)

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

var dropdownElement = document.getElementById('dropdownMenuButton1')
var dropdownInstanceBefore = bootstrap.Dropdown.getInstance(dropdownElement) 
console.log(dropdownInstanceBefore); // null

3. Unless we initialize it(again?). (https://codepen.io/cadday/pen/ExNLvYV)

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

var dropdownElement = document.getElementById('dropdownMenuButton1')
new bootstrap.Dropdown(dropdownElement)
var dropdownInstanceAfter = bootstrap.Dropdown.getInstance(dropdownElement) 
dropdownInstanceAfter.show()

It feels like we should get the instance with the second one too since Bootstrap already initialized the component. Is there (or will there be) a way to achive this with native js or we should stick with the instance creating like within the third one? Is it okay to do that?

Thank you for your time.
Cheers.

[cadday]

I have found out that carousel is working as it is provided in the docs: https://getbootstrap.com/docs/5.0/getting-started/javascript/#asynchronous-functions-and-transitions
https://codepen.io/cadday/pen/QWGrzYW

No luck with modal and dropdowns so far.