css-vars-ponyfill lets older browsers such as IE process CSS custom properties. It is a ponyfill rather than a drop-in browser patch: load it, then call cssVars(). section 12.5
Use it in three stages:
- Install it with npm or load its browser script. section 12.5
- Render any component markup and styles that contain custom properties. section 12.5
- Call cssVars() afterward so the library processes style tags and swaps in declarations IE understands. section 12.5
Safe optional invocation
After setting innerHTML, check typeof cssVars !== 'undefined' before calling cssVars(). This lets component consumers include the ponyfill optionally without triggering an undefined-variable error. section 12.5
Listing 12.14. Adding the CSS vars ponyfill to allow existing CSS vars to work in IE
connectedCallback() {
if (!this.initialized) {
this.root.innerHTML = Template.render({ useShadowDOM:
Slider.USE_SHADOWDOM_WHEN_AVAILABLE && this.attachShadow });
this.dom = Template.mapDOM(this.root);
if ( typeof cssVars !== 'undefined') { #1
cssVars(); #2
}
this.initialized = true;
if (this.backgroundcolor) {
this.setColor(this.backgroundcolor);
}
if (this.value) {
this.refreshSlider(this.value);
}
}
}
Inspect the complete connectedCallback integration, including rendering, guarded detection, and invocation. section 12.5
