Как создать динамически полимерный элемент \ простой тег

Question

У меня есть полимер-элемент вроде этого:

<polymer-element name="x-block" attributes="data"> 
    <template> 
     <div class="block-wrapper"> 
      <div class="plus-button"on-click="{{showMdl}}">+</div> 
      <div hidden?="{{!showModal}}" id="modal"> 
       Modal 
      </div> 
      <content select="header"></content> 
     </div> 

    </template> 
    /*Polymer */ 
    <script> 
     Polymer({ 
      ready: function(){ 
       this.showModal = false; 
      }, 
      showMdl: function(e,detail,sender){ 
       this.showModal = true; 
       this.$.modal.style.top = e.layerY+'px'; 
       this.$.modal.style.left = e.layerX+'px'; 
       var newElement = document.createElement('div') 
       newElement.innerHTML = 'dynamicllyElement'; 
       newElement.setAttribute('on-click','{{clickOnDynamicllyElement}}'); 
       this.$.modal.appendChild(newElement); 
      }, 
      clickOnDynamicllyElement:function(){ 
       console.log('1111') 
      } 
     }); 
    </script> 
</polymer-element> 

clickOnDynamicllyElement не работает.

Answer 1

Вы можете использовать undoc'd injectBoundHTML()

Пример:

this.injectBoundHTML('<div on-click="{{clickOnDynamicllyElement}}">dynamicllyElement</div>', this.$.modal); 

Отказ от ответственности - это был дан ответ командой Polymer в другом месте на SO

Answer 2

Из документов Polymer

https://www.polymer-project.org/docs/polymer/polymer.html#imperativeregister

Регистрация императивно элементы могут быть зарегистрированы в чистом JavaScript, как это:

<script> 
    Polymer('name-tag', {nameColor: 'red'}); 
    var el = document.createElement('div'); 
    el.innerHTML = '\ 
    <polymer-element name="name-tag" attributes="name">\ 
    <template>\ 
     Hello <span style="color:{{nameColor}}">{{name}}</span>\ 
    </template>\ 
    </polymer-element>'; 
    // The custom elements polyfill can't see the <polymer-element> 
    // unless you put it in the DOM. 
    document.body.appendChild(el); 
    </script> 

Вам нужно добавить к документу, так что polyfill Пользовательские элементы поднимает его вверх.

Важно: Поскольку вызов Polymer здесь не входит, он должен содержать аргумент имени тега.