在自定義元素內使用聚合物陰影dom的故障

我正嘗試創建自定義聚合物元素。它需要添加一個新的標籤到一個div容器。在自定義元素內使用聚合物陰影dom的故障

下面是一個例子：

<dom-module id="my-element"> 
    <template> 
    <div id="container"></div> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-element', 
     someHandler: function() { 
     var el = document.createElement('span'); 
     this.$.container.appendChild(el); 
     } 
    }); 
    </script> 
</dom-module>

Howewer如果我這個元素添加到我的佈局兩次，在第二元件上稱之爲someHandler()，它增加了跨度的第一要素。怎麼了？如何解決它？

來源

2016-08-25 alex.bat98

@Supersharp好吧，刪除那些標籤 –

我認爲你應該使用'Polymer.dom（this。$。container）.appendChild（el）'而不是 –

@TomaszPluskiewicz好極了！這就是訣竅！非常感謝你！ –

要使用JavaScript處理節點，您必須使用Polymer的API。這裏的documentation page說什麼：

注：所有DOM操作必須使用此API，而不是直接DOM API的節點。

在你的代碼，添加一個子節點，你應該寫：

Polymer.dom(this.$.container).appendChild(el);

我認爲這是出於性能的考慮過，但是，你看，它似乎也被涉及到如何聚合物以某種方式管理其節點。

來源

2016-08-25 16:41:01

在自定義元素內使用聚合物陰影dom的故障

回答

相關問題