CODEWITHSUNDEEP
polymerweb-component
user5495241
user5495241

Reputation:

Is there a way to insert HTML into a custom element in Polymer?

I want to insert HTML which I write in the custom element into the custom element. For example:

<dom-module id="site">
<template>
<!-- other HTML -->

<!-- insert the HTML -->

<!-- other HTML -->
</template>
</dom-module>

<site>
<!-- HTML to insert -->
</site>

Upvotes: 2

Views: 899

Answers (1)

Andrew Butler
Andrew Butler

Reputation: 727

Check out Polymers Templatizer behavior.

https://www.polymer-project.org/1.0/docs/api/Polymer.Templatizer

You can use a template and stamp out the instances that you require in your element.

Start by including the Templatizer behavior. Then put your desired HTML into a tag (within your element). In your attached method you can load that template into the Templatizer with a call to templatize() that is mixed in from the behavior.

Then when you are ready to use that content you 'stamp' an instance of it. When stamping the instance you can pass in your own model object to represent the data that can be referenced within the scope of the instance.

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

<dom-module id="my-el">
  <template>
    <template id="stampTemplate">
      <p>[[message]]</p>
    </template>                                                                                                                                                                                                                                

    <paper-button raised on-click="doStamp">Stamp</paper-button>                                                                                                                                                   

    <div id="myStamps"></div>                                                                                                                                                                                                                  
  </template>

  <script>
    Polymer({
      is: 'my-el',
      behaviors: [Polymer.Templatizer],

      attached: function() {
        // load/templatize the template
        var template = this.$.stampTemplate;
        this.templatize(template);
      },

      doStamp: function() {
        var instance = this.stamp({message: "Hello World"});
        this.$.myStamps.appendChild(instance.root);
      }          
    });
  </script>
</dom-module>

Lastly, you can append that instance to your page/element as you see fit.

In the example above, I have a template that is a simple paragraph containing a message. When the paper button is clicked I stamp a new instance of the template with the message "Hello World". The instance of this template is then appended to the 'myStamps' div.

Upvotes: 1

Related Questions