CODEWITHSUNDEEP
javascriptdompolymerpolymer-2.x
jtd12589
jtd12589

Reputation: 1

Polymer: Append dynamic component tag with bindings

I am using Polymer 2.0, and I want to dynamically insert a component element into the DOM that will have the correct bindings set.

<child-component collection="[[ parentCollection ]]"></child-component>

In this example the child-component component has a property called collection, this collection property should be bound to the parent component's parentCollection property (which is just an array of numbers). 

const node = document.createElement('child-component');
node.setAttribute('collection', '[[ parentCollection ]]');
this.$.container.appendChild(node);

The above does not seem to work. Setting it as innerHTML (e.g. '<child-component collection="[[ parentCollection ]]"></child-component>') does not work either.

Sample Parent Component

class ParentComponent extends Polymer.Element {
    static get is() { return 'parent-component'; }

    static get properties() {
        return {
           parentCollection: {
               type: Array,
               value: [1,2,3,4,5],
           }
        };
    }
}

customElement.define(ParentComponent.is, ParentComponent);

Sample Child Component

class ChildComponent extends Polymer.Element {
    static get is() { return 'child-component'; }

    static get properties() {
        return {
            collection: {
                type: Array,
                value: [],
            }
        };
    }

    connectedCallback() {
       super.connectedCallback();

       // The desired log would be [1,2,3,4,5]
       console.log(this.collection);
    }
}

customElement.define(ChildComponent.is, ChildComponent);

Sample Dom Module

<dom-module id="parent-component">
    <template>
        <style></style>
        <div id="container></div>
    </template>
    <script src="parent-component.js"></script>
</dom-module>

I've tried looking into Polymer.Bind and the Polymer.PropertyEffects mixin, but I can't seem to get anywhere with it.

Any help would be much appreciated. Thanks!

Upvotes: 0

Views: 438

Answers (1)

Cappittall
Cappittall

Reputation: 3441

Here an example due to your wish at above how to create dynamically polymer element and define a value.:

Demo 

 HTMLImports.whenReady(function() {
    
   class ParentComponent extends Polymer.Element {
      static get is() { return 'parent-component'; }
      static get properties() { return { 
         parentCollection: {
               type: Array,
               value() { return  [1,2,3,4,5]; }
           }
      }}
          ready(){
            super.ready();
            let nod = document.createElement('child-component')
            nod.collection = this.parentCollection;
            this.shadowRoot.querySelector('#container').appendChild(nod);
          }
 }
      
 customElements.define(ParentComponent.is, ParentComponent);
    
    class ChildComponent extends Polymer.Element {
      static get is() { return 'child-component'; }
      static get properties() { return { 
                 collection: {
                           type: Array,
                           value() {return [];}
                 }
              }
            }
      
      connectedCallback(){
        super.connectedCallback();
           console.log('this collection from child: ', this.collection)
      }
 }
customElements.define(ChildComponent.is, ChildComponent);
 });
<html>
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>

</head>
 <body> 
  <parent-component></parent-component>
  <dom-module id="parent-component">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
      }
  </style> 
    <div id="container"></div>
  </template> 
</dom-module>  
</body>
</html>

Upvotes: 0

Related Questions