CODEWITHSUNDEEP
polymerpolymer-1.0
the-catalin
the-catalin

Reputation: 1308

dynamically create elements in Polymer and setting attributes

Considering defining a polymer element

<dom-module id="custom-element"> 
  <template>
    <h1>I expect to be green</h1>
  </template>
  <script>
    Polymer({
      is: 'custom-element',
      properties: {
        color: {
          type: String,
          value: 'red'
        }
      },
      ready: function() {
        this.style.color = this.color;
      }
    });
  </script>
</dom-module>

I would expect that the following two would produce the same result:

  1. (in markup)

    <body>
  <custom-element color="green"></custom-element>
</body>

  2. (in JS)

    var customElement = document.createElement('custom-element');
customElement.color = 'green';
document.body.appendChild(customElement);

But in fact it doesn't, as it seems that the properties are set and the polymer 'ready' function is triggered before the customElement is appended to document.body.

So basically I cannot dynamically create (in JS) custom elements and set them initial properties, different than the default properties.

How would you suggest I should do that?

Thanks!

Upvotes: 3

Views: 2884

Answers (2)

alesc
alesc

Reputation: 2782

In your case, I would avoid altering the DOM and use a simple attribute binding.

Here is a proof of concept: http://jsbin.com/jozejemumu/1/edit?html,js,output

As you can see, I used attribute binding for the style attribute on the h1 element, which simply sets the CSS color property to whatever the value of the elements' color property is.

The code is faily simple, and looks like this:

  <dom-module id="custom-element"> 
    <template>
      <h1 style$="color: [[color]];">I expect to be green</h1>
    </template>
    <script>
      Polymer({
        is: 'custom-element',
        properties: {
          color: {
            type: String,
            value: 'red'
          }
        }
      });
    </script>
  </dom-module>

Using the element remains unchanged:

  <custom-element color="green"></custom-element>

Or:

  var customElement = document.createElement('custom-element');
  customElement.color = 'orange';
  document.body.appendChild(customElement);

Just make sure that the color property contains a valid HTML color name/value.

Upvotes: 1

a1626
a1626

Reputation: 2964

Set the color in attached callback instead of ready. Attached is called after the element has been appended in dom.

<base href="https://polygit.org/components/">
<script src="wecomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="custom-element">
  <template>
    <h1>I expect to be green</h1>
  </template>
  <script>
    Polymer({
      is: 'custom-element',
      properties: {
        color: {
          type: String,
          value: 'red'
        }
      },
      attached: function() {
        this.style.color = this.color;
      }
    });
  </script>
</dom-module>


<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script>
    var customElement = document.createElement('custom-element');
    customElement.color = 'green';
    document.body.appendChild(customElement);
  </script>
</body>

</html>

Upvotes: 3

Related Questions