CODEWITHSUNDEEP
polymer
Franz Thomsen
Franz Thomsen

Reputation: 484

Polymer with elements in main page not showing in IE

Why is it that this Works in Chrome, but not in IE:

<!doctype html>
<html>
<head>
    <script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
    <link rel='import' href='base-element.html'>
</head>
<body>
    <base-element></base-element>
</body>
</html>

With this in the base-element

<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="base-element">
    <template>
        <div>test</div>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'base-element'
    });
</script>

When this doesn't

<!doctype html>
<html>
<head>
    <script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
    <dom-module id="base-element">
        <template>
            <div>test</div>
        </template>
    </dom-module>
    <script>
        Polymer({
            is: 'base-element'
        });
    </script>
    <base-element></base-element>
</body>

It works in Chrome alright, but not in IE

Cheers

Stack Overflow thinks I have too much "code" in this post ... so please skip this nonsense: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu erat vel nunc lacinia commodo a sed nisl. Quisque commodo turpis sed diam fringilla cursus. Nunc nisi mi, lacinia maximus lacus in, elementum vehicula purus. Suspendisse ut dolor nisi. Nunc porttitor sem quis viverra molestie. Cras porta in risus tempor molestie. Fusce at magna tellus"

Upvotes: 0

Views: 506

Answers (1)

Franz Thomsen
Franz Thomsen

Reputation: 484

This seems to work:

<!doctype html>
<html>
<head>
    <script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
    <dom-module id="base-element">
        <template>
            <div>test</div>
        </template>
    </dom-module>
    <script>
        HTMLImports.whenReady(function() { Polymer({
            is: 'base-element'
        });});
    </script>
    <base-element></base-element>
</body>

Its the HTMLImport that does the trick .... but I have no clue why. Anyone? :-)

Upvotes: 1

Related Questions