TypeError when Creating new bootstrap Object Before Adding to DOM - 5.3.0

[danFWD]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

After upgrading directly from Bootstrap 5.0.x to 5.3.0 in a project recently, I noticed a new exception being thrown from some of my javascript classes: TypeError: 'querySelector' called on an object that does not implement interface Element.

After debugging and finding the offending line, it landed on the instantiation of a new bootstrap component object - either with new bootstrap[Component] or with bootstrap[Component].getOrCreateInstance.

In version 5.0.*, it worked fine when creating a new HTMLElement with document.createElement, then using that element in a Bootstrap component before it had been attached to the DOM. Now it throws the aforementioned error if it hasn’t been added to the DOM first.

Reduced test cases

I did my best to look through the documentation for a reference to this behavior, and couldn’t find it. I apologize if it is there somewhere. If it isn’t and this is intended functionality, it is probably best to add this tidbit to the documentation to prevent similar hard-to-diagnose errors in the future. It might also be a good idea to throw a more concise exception. Thanks!

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

5.0.1, 5.3.0

[XhmikosR]

Any help is welcome but please add a test case if you make a PR.

[danFWD]

Yes, sorry, I was in the middle of a project and had to move on to fixing it. I’ll try to recreate the error and post my findings as soon as I have a chance. In any case, I couldn't recreate it with just a simple createElement and then using that with getOrCreateInstance, so there is something more going on.

[Ahmedatal]

Hello, can I get assigned this task I would love to help fix it!