IE 11 - Custom Properties Not Reflecting Changes with Pseudo Class Hover

[chuangbert]

Description

IE 11 fails to reflect custom property changes with pseudo class hover.

#someElement:hover {
    --paper-input-container-input-color: red;
    ...
}

Expected outcome

In IE 11, hovering over the element updates the color

Actual outcome

No changes occur

Live Demo

Steps to reproduce

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [x] Edge
• [x] IE 11
• [ ] IE 10

[notwaldorf]

Is this for Polymer 1 or 2? Is this in a <custom-style> or a style is="custom-style"? Please provide a jsbin with repro steps, as there's a million things that could go wrong here.

[chuangbert]

Hey @notwaldorf, this is for Polymer 2. And here's a sample: http://plnkr.co/edit/Uvd91m1RRv0OPwXCHYYG?p=preview Thanks for the response

[notwaldorf]

Hmm, does it work if you include the apply-shim polyfill (https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-custom-css-mixins) and the custom-style polyfill (https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-css-inheritance) ?

[chuangbert]

Added both files and no go :(

These are the files:

<link rel="import" href="../polymer/lib/elements/custom-style.html">
<link rel="import" href="../shadycss/apply-shim.html">

[notwaldorf]

I thiiiiink this may be a shim limitation, and the idea is basically that custom property isn't updated correctly on hover (hovering doesn't tell the styling system to update it, basically). To test this, you might want to call updateStyles on a mouseover or something, which is pretty ugh.

/cc @azakus to confirm.

[chuangbert]

Thanks for the suggestion...tried the following but it also didnt work.

<paper-dropdown-menu on-mouseover="willThisWork">...</paper-dropdown-menu>

this.updateStyles({
              '--paper-input-container-color': 'red',
            });

[mleonardallen]

@chuangbert @notwaldorf I was able get updateStyles to work by applying updateStyles to the child element.

let paperDropdownMenu = this.$.paperDropdownMenu.shadowRoot ? this.$.paperDropdownMenu.shadowRoot : this.$.paperMenu;
let input = paperMenu.querySelector('paper-input');

window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */(input), {
  '--paper-input-container-input-color': 'red'
});

// or
let updateStyles = this.updateStyles.bind(input);
updateStyles({'--paper-input-container-input-color': 'red'});

[mtallenca]

Not just a hover problem, I am seeing this error just by dynamically adding a class. Edge paints the paper-input fine on load. Adding a class to the paper-input after the initial load that has modified custom attribute does not update. Calling updateStyles() on the paper-input does work.