CdsElements memory leak issue

[aravindh-nagarajan]

Describe the bug

In our project, we are using lot of cds-elements. Recently I was doing a memory profile and found that we have lot of detached HTML Elements and most of those are clarity core alert/button/icon elements.

I am not sure why these elements are still in memory even after they are removed in DOM.

How to reproduce

Sample repo: https://github.com/aravindh-nagarajan/angular-clarity-core-sample-project

Steps to reproduce the behavior:

1. Clone the above github repo
2. ng serve --open
3. Stay on the first page, you can see a alert element and button element:

4. Click on the second tab, cds elements are not present in dom, record memory snapshot: (memory snapshot shows the existence of detached cds elements)

5. Click on the third tab, cds elements are not present in dom, record memory snapshot: (memory snapshot shows the existence of detached cds elements)

Expected behavior

Expect not to see these elements in memory after they are removed from DOM.

Versions

Clarity project: Clarity Core Clarity version: v6.x Framework: - Angular Framework version: Angular 13 Device:

• Type: Macbook
• OS: iOS
• Browser Chrome

[ashleyryan]

This may be related to this issue: https://github.com/vmware-clarity/core/issues/61

I might have a fix for icons, and then I'll check the other elements as well.