CODEWITHSUNDEEP
polymerweb-component
pedalpete
pedalpete

Reputation: 21536

polymer not displaying html from import

I'm just getting started with building web-components with polymer, and was following the tutorial.

I'm just at the start, and am adding my component to my page via a script, but my html from my template isn't being displayed.

Here's what I've got so far.

document.addEventListener("DOMContentLoaded", function() {
    if(!window.Polymer){
        var poly = document.createElement('script');
        poly.src = "http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js";
        document.head.appendChild(poly);   
    }

    var template = document.createElement('link');
    template.setAttribute("rel", "import");
    template.setAttribute("href", "http://localhost:8081/first-widget.html");


    document.body.appendChild(template);


    var widget = document.createElement('my-widget');
    document.body.appendChild(widget);

    setTimeout(function(){
        Polymer('my-widget');
    },1000);
 });

My widget is 

<polymer-element name="my-widget">
    <template>
        <h1>This is from the Polymer</h1>
    </template>
</polymer-element>

My understanding is that this should display the content of my html from the template in my my-widget tag. I've got the localhost:8081 serving the content of the template via CORS, so that isn't the issue, and I can see the template loaded into chrome via the element inspector. So I'm not sure why I'm not getting my content.

Is there a way I need to bootstrap polymer?

Upvotes: 0

Views: 2020

Answers (3)

pedalpete
pedalpete

Reputation: 21536

It turns out I was including the platform.js but not polymer.js If anybody is loading polymer dynamically as I am (as we're building a widget which other people can include in their page), it seems it is best to use the noscript attribute as @pikanezi described, as you don't run into timing issues this way.

Upvotes: 0

pikanezi
pikanezi

Reputation: 1128

In your widget, you need to import polymer.html and either use the noscript attribute:

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

<polymer-element name="my-widget" noscript>
    <template>
        <h1>This is from the Polymer</h1>
    </template>
</polymer-element>

or register your element:

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

<polymer-element name="my-widget">
    <template>
        <h1>This is from the Polymer</h1>
    </template>
    <script>
        Polymer({});
    </script>
</polymer-element>

More information on creating elements: http://www.polymer-project.org/docs/start/creatingelements.html

Upvotes: 1

rcarvalho
rcarvalho

Reputation: 790

You'll need to run your html into a server. I'm using http-server that is very simple.

npm install http-server

Basically you navigate through to index.html file and run "http-server".

Hope it helps

Upvotes: 0

Related Questions