LitElement classMap and styleMap are not working on IE11
AAZANOVICH opened this issue · 5 comments
Description
classMap and styleMap directives preventing template to render on ie11.
see example https://4fbjek--run.stackblitz.io
Took example from documentation (https://lit-element.polymer-project.org/guide/styles#dynamic-classes-and-styles)
`import { LitElement, html, css } from 'lit-element';
import { classMap } from 'lit-html/directives/class-map';
import { styleMap } from 'lit-html/directives/style-map';
class MyElement extends LitElement {
static get properties() {
return {
classes: { type: Object },
styles: { type: Object }
}
}
static get styles() {
return css.mydiv { background-color: blue; } .someclass { border: 1px solid red; }
}
constructor() {
super();
this.classes = { mydiv: true, someclass: true };
this.styles = { color: 'green', fontFamily: 'Roboto' };
}
render() {
return html<div class=${classMap(this.classes)} style=${styleMap(this.styles)}> Some content </div>;
}
}
customElements.define('my-element', MyElement);
`
Acceptance criteria
It should be supported by ie11
We'll need more information. We test classMap and styleMap on IE11 and they pass currently.
@justinfagnani I provided an example https://4fbjek--run.stackblitz.io
It takes a bit of work for us to run things in IE11, and Stackblitz seems hung. Can you at least provide the error you're seeing? You don't give any indication of what's wrong? Is there an exception, is something rendering incorrectly? What version of lit-html are you using?
I appologize for delay, I have problems testing IE as well, on top of that on virtual machine dev console is disabled and I can't see console output.
Issue happens when you set css variable to null.
i.e.
styleMap['--some-var'] = null;
Console output:
SCRIPT5007: Unable to get property '__shady_native_dispatchEvent' of undefined or null reference
patch-events.js (405,3)
Please update to the latest versions of the web components polyfills, LitElement, and lit-html and confirm if the issue still exists.
I was able to confirm that this example https://heavenly-second-click.glitch.me/ works with the latest versions on IE11. Please feel free to re-open the issue with more info if it's still a problem. Thanks!