3

Hi I have an app built with Polymer 1.0 and testing my app in chrome works no issue. But in IE 11 my index page is just a blank page and according to the DOM explorer is loading none of the elements. I am importing elements in an elements.html file. While my custom elements are added directly in the head. In DOM explorer the body is empty. Any thing that I am missing?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="elements/elements.html">
    <link rel="import" href="components/add-skill/add-skill.html">
    <link rel="import" href="components/app-menu/app-menu.html">
    <link rel="import" href="components/view-profile/view-profile.html">
    <link rel="import" href="components/search-skill/search-skill.html">
    <link rel="import" href="components/view-users/view-users.html">
    <link rel="import" href="css/main.html">


</head>
<body class="fullbleed">
<template id="app" is="dom-bind">
<paper-drawer-panel>
    <paper-header-panel main>
        <paper-toolbar>
            <div>Toolbar</div>
                <paper-icon-button icon="menu" paper-drawer-toggle>
            </paper-icon-button>
            <span class="flex"></span>
            <paper-button onclick="_logout()">
                <div>Log out</div>
            </paper-button>
        </paper-toolbar>
        <neon-animated-pages class="flex" selected="{{selected}}">
            <view-profile></view-profile>
            <add-skill></add-skill>
            <search-skill></search-skill>
            <view-users></view-users>
        </neon-animated-pages>
    </paper-header-panel>
    <paper-header-panel drawer>
        <paper-toolbar>
        </paper-toolbar>
        <paper-menu class="list" selected="{{selected}}">
            <paper-item>
                <iron-icon icon="account-circle"></iron-icon>
                    <span>Profile</span>        
            </paper-item>
            <paper-item>
                    <iron-icon icon="add" on-click="showAddSkill"></iron-icon>  
                    <span>Add Skills</span> 
            </paper-item>
            <paper-item>
                    <iron-icon icon="search"></iron-icon>   
                    <span>Search</span> 
            </paper-item>
            <paper-item>
                    <iron-icon icon="android"></iron-icon>  
                    <span>Users</span>  
            </paper-item>
    </paper-menu>
    </paper-header-panel>
</paper-drawer-panel>   
</template>
<script src="scripts/app.js"></script>
</body>
</html>
user3510945
  • 113
  • 1
  • 10

2 Answers2

0

This issue as far as i know is related with IE 11 that doesn't support the Shadow DOM for more info (http://caniuse.com/#search=shadow%20dom)

Alejandro Vales
  • 2,816
  • 22
  • 41
0

You should use the full webcomponents.js to get the polyfills as well. IE11 is actually supported this way: https://www.polymer-project.org/1.0/resources/compatibility.html#other-apis

Kjell
  • 832
  • 7
  • 11
  • Thanks gents, I did take a look at the compatibility as you posted Kjell. I have used both lite and full versions of webcomponents.js. What looks to be happen is one of my custom elements is breaking the app. I have opened another question revolving around the issue here: http://stackoverflow.com/questions/31908951/ie-11-unable-to-get-property-length-of-undefined-or-null-reference – user3510945 Oct 13 '15 at 10:51