Search code examples
javascriptdompolymerhtml-imports

Polymer update DOM-element after import


I have a HTML import element, which is a DOM element, imported via:

<link rel="import" src="element.html">

Now i want to update the custom element without reloading the site.

//example method
function updateImports(){
    update([importelement]);
}

I don't know if this is even possible.


Thanks in advance ;)


Solution

  • If you want to set up your custom element’s prototype chain but not register it immediately, you can use the Polymer.Class function. Polymer.Class takes the same prototype argument as the Polymer function, and sets up the prototype chain, but does not register the element. Instead it returns a constructor that can be passed to document.registerElement to register your element with the browser, and after which can be used to instantiate new instances of your element via code.

    var MyElement = Polymer.Class({
    
      is: 'my-element',
    
      // See below for lifecycle callbacks
      created: function() {
        this.textContent = 'My element!';
      }
    
    });
    
    document.registerElement('my-element', MyElement);
    
    // Equivalent:
    var el1 = new MyElement();
    var el2 = document.createElement('my-element');
    

    doc