CODEWITHSUNDEEP
polymerweb-componentpolymer-2.x
abcd_1234
abcd_1234

Reputation: 175

Polymer 2.0 : How to dynamically append child in shadow dom, as append child doesn't work

Getting this error message when try to add a child element :

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Upvotes: 0

Views: 2321

Answers (2)

Dean Martin
Dean Martin

Reputation: 1283

In the context of your component, for example in the ready method, try the following.

ready(){
    super.ready();
    this.root.appendChild(newEle);
}

Or from outside of the component, for example in whatever hosts your component, try the following.

document.querySelector("your-component-is").root.appendChild(newEle);

Upvotes: 2

Camille
Camille

Reputation: 2531

You can try that :

      // Get element from shadow dom
      var containerEle = Polymer.dom(this.root).querySelector('shadow_dom_selector');

      // Create dynamic element
      var newEle = document.createElement('span');
      newEle.textContent = 'Hello World';

      // Append
      containerEle.appendChild(newEle);

If your container element have an id

      Polymer.dom(this.$.containerElementId).appendChild(newEle);

Upvotes: 2

Related Questions