Polymer import not rendering

0
votes

I have ran into this situation many times before and I still am not able to fix it. When I import core/paper elements downloaded from bower sometime the import will prevent my page from loading so I will end up with a blank screen. I have managed to fix that problem by importing the url to the element instead of bower. I was able to create a simple polymer element consisting of many input texts, but today when I created a simple databindning element my page will not load.

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
    <link rel="import" href="hello-name.html">
    <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> 
</head>
<body>
    <p><hello-name></hello-name><p>
</body>
</html>

hello-name.html

<polymer-element name="hello-name">
    <template>
        <h1>Hello {{name}}</h1>
        <input type="text" value="{{name}}> 
    </template>
    <script>
        Polymer('hello-name', {
            ready: function() {
                this.name = "World";
            }
        })
    </script>
</polymer-element>
5
polymer
Change to <input type="text" value="{{name}}">. Here is a plunker, everything seems to be working just fine - wirlez

5 Answers

2
votes

One potential issue that I can see is that you want to put webcomponents.js above your imports.

The other common cause of a blank screen are when you have some elements with html declarations but no corresponding script, which creates a situation where Polymer is waiting for their script to load and execute. You can see what elements Polymer is waiting for by running Polymer.waitingFor() in your browser's console.

0
votes

You don't need the Polymer.html in your main html page you need to include it in your custom element.

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="hello-name">
    <template>
        <h1>Hello {{name}}</h1>
        <input type="text" value="{{name}}> 
    </template>
    <script>
        Polymer('hello-name', {
            ready: function() {
                this.name = "World";
            }
        })
    </script>
</polymer-element>
0
votes

I have imported a custom element that I have created a few months back and it seems to have no problem. I have just created another simple element with binding and it seems to break the page too! I have tried putting the polymer.html at the top of custom element as well as moving webcomponent.js to the top of imports and it seems to not work.

0
votes

directory structure is important. Assume you have;

/bower_components/polymer/polymer.html

create a directory inside bower_components and put your component inside this directory i.e.

/bower_components/hello/hello.html

Inside hello.html load polymer.html

<link rel="import" href="../polymer/polymer.html">

href is used to identify if an element is loaded before. If you don't use ../polymer/polymer.html browser tries to load it twice and you get a blank page.

0
votes

If you are using polymer 1.0 check this guide:

https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html

Apparently you have to use instead of and explicitly register the module with js.