[@Cds/Card] Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes

[KishanRavindran]

Describe the bug

When adding the cds card in angular 12 project I am getting the error/warning as "Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes" But not the same when adding other cds web components.

How to reproduce

Create a angular project and install the below npm npm install @cds/core @cds/city --save and then install ng add @cds/angular

Also add these in the styles.scss or style.css file

@import '~modern-normalize/modern-normalize.css'; // css reset
@import '~@cds/core/global.min.css'; // clarity global styles
@import '~@cds/city/css/bundles/default.min.css'; // load base font

Also you can follow the angular installation following the steps for angular from this link

Steps to reproduce the behavior:

1. Go to any component html file
2. Add the cds card code in the html file as in this link
3. Then run the angular project.
4. When go to the UI page which has the cds-card html been added you will be able to see this error as Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v3.x
• [ ] v4.x
• [x] v5.x

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version: Angular 12

Device:

• OS: [Ubuntu]
• Browser [chrome, firefox]

[astorije-vmware]

Duplicate of #6589, except I didn't realize this also happens on Angular!

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.