Problem with v-bind:class in Microsoft Edge for components

[yamelkaya]

Version

2.6.10

Reproduction link

https://codepen.io/yamelkaya/pen/KKwvdrY

Steps to reproduce

Open codepen example. There are 3 components test-x on the page which set text color and background. Each label tells about text color and background.

Chrome: everything works as expected

Edge 18: 1st and 3rd labels have incorrect color

What is expected?

1: red text on yellow bg
2: red on gray
3: black on yellow

What is actually happening?

1: black on gray
2: red on gray
3: black on gray

[posva]

Seems like a browser quirk that was fixed later on:

As a workaround, you can use inheritAttrs: false and add v-bind="$attrs" to the h3 element

[dagadbm]

if i wanted to help on this issue what could I do?

[jaireina]

@posva, I was going to fix this but I noticed that this is due to an issue on Codepen.io. If you open the provided pen on Edge and go to the console, you'll see an error in there. If you edit something in the pen, you won't see the changes reflected in the output panel because of that error.

I grabbed the code and put it in my local as well as on codesandbox.io and everything worked just fine on Edge.

Here are some screenshots:
codesandbox.io

My local server

Codepen.io

[posva]

Thanks a lot for checking that @jaireina