聚合物1.0和外部DOM操作庫

我想知道如何在通過jQuery或虛擬DOM創建後修改Polymer 1.0標籤。聚合物1.0和外部DOM操作庫

我想用Mithril.js的Polymer 1.0。聚合物0.5.5具有Shadow DOM，其標籤字面和內部結構（在Chrome的檢查器上）幾乎相同。但1.0使用陰暗的DOM，它作爲HTML模板工作。

來源：

<paper-button role="button" tabindex="0">hello world</paper-button>

聚合物1.0檢查員結果：在檢查員

<paper-element>hello world</paper-element>

聚合物0.5.5結果

<paper-button role="button" tabindex="0" aria-disabled="false" class="x-scope paper-button-0"> 
    <paper-ripple class="style-scope paper-button"> 
    <div id="background" class="style-scope paper-ripple"></div> 
    <div id="waves" class="style-scope paper-ripple"></div> 
    </paper-ripple> 
    <paper-material animated="" class="content style-scope paper-button x-scope paper-material-0" elevation="0"> 
    hello world 
    </paper-material> 
</paper-button>

例如，當執行命令的jQuery這樣的：

$("paper-element").text("new label");

它與0.5.5（它顯示正確的標籤），但打破1.0（內部標籤已成爲螞蟻變成只是標籤）。這種新行爲不適合通過其他DOM操作庫操作Polymer的自定義標籤（首先，當我玩Mithril.js時，我遇到了這個問題）。我無法找到任何API來重新初始化內部標籤。

有沒有什麼好的解決方案在創建後修改Polymer 1.0標籤以支持虛擬DOM或jQuery？

更新（2015年6月3日）

我發現溶液從Polymer document。聚合物1.0可以添加以下代碼段後祕虛擬DOM工作：

<script> 
    window.Polymer = window.Polymer || {}; 
    window.Polymer.dom = 'shadow'; 
</script>

聚合物使用陰影DOM而不是默認黑幕DOM通過此設置開始。它與Polymer 0.5.5和JavaScript DOM API友好相同。感謝你們！

來源

2015-06-01 Yoshiki Shibukawa

將聚合物的dom設置爲「陰影」並不能解決在更新陰影元素並將其更改爲DOM元素時將得到的重繪問題。 Shadow DOM和Mithril不能很好地協同工作，我想這個數字對於所有虛擬DOM庫都很重要。 –

理想情況下paper-button會暴露一個屬性或方法來修改內容，但documentation不會列出任何類似的東西。

幸運的是它仍然是HTML，可以使用。在demo page我選擇了Chrome檢查的一個按鈕，跑到下面的代碼來更新按鈕的內容：

$0.querySelector('paper-material').innerHTML = 'testing';

在Chrome控制檯$0是指目前在Chrome元素檢查選擇的元素，在這個情況之一paper-button元素。

來源

2015-06-01 20:10:55 Zikes

是的，您的解決方案正常工作。但是它說我們必須爲每個紙張元素實現特殊的組件：（我也試過了「紙張抽屜面板」，它的結構完全不同 –

這聽起來像是自己升級紙張元素的好機會！絕對需要它，因爲你已經看到了，並且它需要目前每個組件的知識，所以我認爲一個API在組件集合中的應用會很好，如果我是你，我會把它作爲一個新問題在https://github.com/PolymerElements/paper-elements/issues – Zikes

類似Polymer集合中的Web組件很難自定義和動態填充。陰影DOM的本質使其不受外部影響，這在我看來是Web組件的關鍵限制。

但是，可以將這些元素重建爲Mithril組件以允許自定義控件。有一個極好的材料設計元素收集使用Mithril在NPM和Github以Polythene的名義製作。

來源

2015-06-02 04:16:39 Barney

我認爲說Web組件不受外部影響是不合理的，因爲我對這個問題的回答清楚地表明瞭一個可以穿透影子DOM的工作解決方案。我認爲你可以更準確地說，Web組件的本質需要對組件的內部知識有所瞭解，或者，他的組件必須爲內部訪問提供一個良好的API。不過，我會稱之爲功能。 – Zikes

聚合物1.0和外部DOM操作庫

回答

相關問題