Material

Supporting Internet Explorer 11 and Edge 14

If you need to support Internet Explorer 11 and/or Edge 14, you need to apply styling in a certain way, because the CSS custom properties are applied using the ShadyCSS shim which has limitations.

Global style modules using <custom-style>

If you wish to import the global theme styles, you need to do that in the root scope of your HTML. If you place the <custom-style> element inside an HTML import, it doesn’t work in IE11 or Edge14.

Also, you need to provide at least one white space character inside the <style> element.

Doesn’t work

my-import.html index.html

Works

index.html

Dark theme

In order to apply the dark theme colors, you need to introduce a new CSS scope in the form of a shadow root, as a custom element. The ShadyCSS shim only polyfills custom property values on shadow root boundaries.

The easiest way to do so is to create a new Polymer element, and include the “material-dark” style module inside its template:

dark-styles.html