Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Cannot define an element in the main document (Firefox and Internet explorer) #1187

Closed
arthurevans opened this issue Jun 12, 2015 · 6 comments
Closed

Cannot define an element in the main document (Firefox and Internet explorer) #1187

arthurevans opened this issue Jun 12, 2015 · 6 comments
Assignees
@kaycebasques

Comments

@arthurevans
Copy link

From @plequang on June 12, 2015 11:36

While migrating tests from app-router to Polymer 1.0, I've noticed that it is not possible to define an element and use this element in the main document.

The following simple example fails under Firefox and Internet Explorer, because 'Polymer' is not defined :

<!DOCTYPE html>
<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <title>Polymer Tests</title>
    </head>
    <body>
        <dom-module id="x-element">
            <template>
                Test element.
            </template>
            <script>
                Polymer({
                    is: 'x-element'
                });
            </script>
        </dom-module>
        <x-element></x-element>
    </body>
</html>

It works with Chrome though.

Test page is also available here http://plequang.github.io/polymer-tests/

I thought it was a HTMLImport polyfill problem, but the same example with Polymer 0.5 and webcomponentjs 0.7.3 is working correctly.

Is this a bug, or is this way of defining elements prohibited with Polymer 1.0 (meaning you should always define elements in other files than the main document) ?

Thanks

Copied from original issue: Polymer/polymer#1850
@arthurevans
Copy link
Author

From @plequang on June 12, 2015 11:42

I've just seen the sample jsbin mentionned here https://github.com/Polymer/polymer/blob/master/CONTRIBUTING.md#filing-bugs

Everything works if I use

<script>
    HTMLImports.whenReady(function () {
        Polymer({
            is: 'x-element'
        });
    });
</script>

Maybe it would be worth mentionning this in the documentation ?

@arthurevans
Copy link
Author

This limitation is documented here:

https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html

This is, as you guessed, a limitation of the polyfill. Polymer 0.5 worked around this at the cost of additional complexity, so Polymer 1.0 doesn't do the same workaround.

This could be clearer in the docs (and we should cover using whenReady), so I'll turn this into a doc issue.

@arthurevans arthurevans mentioned this issue Jun 12, 2015
Closed
@arthurevans
Copy link
Author

Suggested fix: raise the prominence of this little note by creating a new subhead "Registering elements in the main document" (or words to that effect), and describing the limitation and the workaround.

Should note that this workaround is primarily useful for small test cases, since it allows you to keep everything in one file.

@plequang
Copy link

OK my bad. I didn't care enough to little notes while reading the doc.

Thanks for your answer.

@kaycebasques kaycebasques self-assigned this Jul 6, 2015
@adewinter
Copy link

Hey @arthurevans . Just wanted to say thank you for highlighting this issue so thoroughly. Saved us a lot of headache/debugging!

Cheers.

kaycebasques pushed a commit that referenced this issue Jul 14, 2015
Explain how to register elements from main document, a la #1187.
6e797ae
@kaycebasques kaycebasques mentioned this issue Jul 14, 2015
Merged
@Georgehe4 Georgehe4 mentioned this issue Aug 4, 2015
Closed
@arthurevans
Copy link
Author

Fixed by @kaycebasques in PR #1256.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@kaycebasques kaycebasques

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@adewinter @arthurevans @kaycebasques @plequang