Clarity: CdsIcon fails in Microsoft EDGE browser

[aravindh-nagarajan]

Describe the bug

cds-icon is not being rendered in Edge browser.

we get this following error from cdsIcon component.:
Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes.

It works in Chrome and Firefox without any errors.
We followed below guides to migrate to @clr/core/icon., since @clr/icons are being deprecated.

https://github.com/vmware/clarity/issues/4333
https://github.com/vmware/clarity/issues/3905
https://clarity.design/news/3.0.0-next.6
https://clarity.design/storybook/core/?path=/docs/documentation-angular--page

How to reproduce

unable to repro in stackBlitz, when cdsIcon is used, I got some exception from custom-elements.
So simple repo with code: https://github.com/aravindh-nagarajan/clarity-test

Steps to reproduce the behavior:

1. ng serve

Versions

App

• Angular: 9.0.7
• Node: v10.15.3
• Clarity: 3.1.0

Device:

• OS: Windows
• Browser : Edge

[mathisscott]

@aravindh-nagarajan
Did you install the @webcomponents/custom-elements polyfill?

[aravindh-nagarajan]

yes. In angular.json,

"scripts": [
              "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
              "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
              "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"
            ]

[mathisscott]

and you've installed it through npm?

[aravindh-nagarajan]

yes

    "@webcomponents/custom-elements": "1.0.0",
    "@webcomponents/webcomponentsjs": "^2.4.3",

[mathisscott]

cool. what version of Edge are you reporting against?

[aravindh-nagarajan]

Latest one: Version 81.0.416.53 (64-bit)

[mathisscott]

thanks, @aravindh-nagarajan . i'll ping you if we need any other info.

it may take us a few days to look into this. we haven't seen this problem before. an online search made it look like the culprit was the shims not being loaded or installed.

so if we've eliminated that, there's no telling what is happening until we can reproduce it.

it's interesting though because latest Edge _should_ be based off chromium. so you theoretically should not need the shims and should not be seeing wild variance between Chrome and Edge...

[mathisscott]

@aravindh-nagarajan
So we've isolated the issue. It's an integration issue with Angular, Lit Element, and the setting of properties/attributes.

It affects more than just the icons.

I'm in the middle of migrating our existing web components over to use core layouts and design tokens and will be addressing these issues as I find them as part of that work.

A fix for icons should be up in a week or two (b/c i'm in the middle of buttons, tags, and badges atm).

Thanks for reporting this!

[aravindh-nagarajan]

Hi @mathisscott, Thank you. Can you please let us know when will it be released?

[mathisscott]

Assuming all goes as planned with our release. Tomorrow.

[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.