Polymer 2.0：如何在阴影 dom 中动态附加子项，因为附加子项不起作用

Question

尝试添加子元素时收到此错误消息：

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

Answer 1

你可以试试:

      // 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);

如果您的容器元素有一个 id

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

Answer 2

在组件的上下文中，例如在 ready 方法中，尝试以下操作。

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

或者从组件外部，例如在任何托管您的组件的地方，尝试以下操作。

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

Polymer 2.0：如何在阴影 dom 中动态附加子项，因为附加子项不起作用

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

web-component

polymer

polymer-2.x