search

Polymer / polymer

Our original Web Component library.
https://polymer-library.polymer-project.org/
BSD 3-Clause "New" or "Revised" License
22.03k stars 2.02k forks source link

updateStyles() doesn't work in IE11 #5015

Closed limonte closed 3 years ago

limonte commented 6 years ago

Description

It's not possible currently to update the CSS custom property using updateStyles() in IE11. The same thing in all other browsers works as expected.

Live Demo

jsfiddle for IE11 isn't possible, so here's the repo: https://github.com/limonte/ie-polymer2-issue-5015/

Steps to Reproduce

  1. Clone the repo above
  2. Serve and run in IE11

Expected Results

The my-custom-element has sandybrown background. This is the screenshot from Chrome:

Actual Results

The my-custom-element has steelblue background.

Browsers Affected

Versions

Artur- commented 6 years ago

This is not IE11 only, it also manifests in Safari 9. Is this somehow related to ES5 transpilation?

Artur- commented 6 years ago

Never mind, the test case is broken as it uses the same id on both dom-module and my-custom-element.

If you change index.html to <my-custom-element id="the-element"></my-custom-element> and const myCustomElement = document.getElementById('the-element');

then it works fine in all browsers from what I can see

Artur- commented 6 years ago

On the other hand, if I change the test to use myCustomElement.style.setProperty('--my-custom-color', 'sandybrown');, i.e. style.setProperty instead of updateStyles, then it is broken on IE11 + Safari 9 and works on Safari 10, Firefox, Chrome

Artur- commented 6 years ago

Right, so I was under the impression that some other browsers also were using the polyfill but as it turns out, only IE11 and Safari 9 need filling. Then it kind of makes sense.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.