Memory leak with dynamic html + All components

[vishnutk]

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

Tooltip (popover) on dynamically added html elements are not getting cleared from the ElementMap after removing that html. If we reinsert the html content, elementMap is getting created with new entries and old element entries never gets removed.

Reduced test cases

1. Open https://vishnutk.github.io/bootstrap/
2. Open browser console in debugger
3. Click on Template Toggle button
4. Mouseover on Template Dynamic Button 1
5. Watch for the console log
6. Click on Template Toggle button to remove html
7. Mouseover on Template Dynamic Button 1
8. Watch for the console log

Everytime the new entry gets added in the ElementMap.

Reason: elementMap.has is checking by reference but we are getting new element.

const Data = {
            set(element, key, instance) {
              if (!elementMap.has(element)) {
                elementMap.set(element, new Map());
              }

              const instanceMap = elementMap.get(element);

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

macOS

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

Chrome, Firefox

What version of Bootstrap are you using?

v5.2.3

[XhmikosR]

Please provide a PR with a test case.