Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[0.8] IE11 displays and then hides Custom Elements #1412

Closed
jodekirk opened this issue Apr 14, 2015 · 1 comment
Closed

[0.8] IE11 displays and then hides Custom Elements #1412

jodekirk opened this issue Apr 14, 2015 · 1 comment
Assignees
@kevinpschaaf
Labels
needs investigation p1

Comments

@jodekirk
Copy link

Chrome displays the text correctly: 'Hello World, I am a Custom Element!',
but IE11 displays 'This is local DOM' very briefly and then removes it and displays nothing. Is this a bug?

<html>
<head>
    <script src="webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="polymer/polymer.html" />
</head>
<body unresolved>
    <x-custom></x-custom>
    <dom-module id="x-custom">
        <template>
            <div>This is local DOM</div>
        </template>
    </dom-module>
    <script>
        Polymer({
            is: 'x-custom',
            properties: {
                user: String,
                isHappy: Boolean,
                count: {
                    type: Number,
                    readOnly: true,
                    notify: true
                }
            },
            ready: function () {
                this.innerHTML = 'Hello World, I am a <b>Custom Element!</b>';
            }
        });
        document.body.removeAttribute('unresolved');
    </script>
</body>
</html>
@kevinpschaaf kevinpschaaf self-assigned this May 22, 2015
@sorvell
Copy link
Contributor

sorvell commented May 23, 2015

When defining an element in the main document on a browser that doesn't support HTMLImports natively, you need to wait for the HTMLImportsLoaded event to call Polymer. For example,

<script>
addEventListener('HTMLImportsLoaded', function() {
  Polymer({
    // stuff
  });
});
// ...

This should make the above work. Also, you'll want to use webcomponents-lite.js instead of webcomponents.js.

@sorvell sorvell closed this as completed May 23, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kevinpschaaf kevinpschaaf

Labels
needs investigation p1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@sorvell @kevinpschaaf @jodekirk