2015-02-08 41 views
1

我想一個聚合物UI添加到其中包含一個表單現有的HTML頁面。我無法控制頁面內容,只有頁眉和頁腳,因此我無法將表單更改爲使用聚合物元素,而不是<input>。所以相反,我試圖用JavaScript重寫表單。改變的問題「是」動態的聚合物

我發現,添加is屬性到現有的元素沒有影響---元素沒有得到upgtaded。

我認爲這一切都發生在聚合物掃描DOM尋找is屬性之後的一個點,所以它不會注意到我的變化。

有沒有解決這個任何方式(雖然創建與is屬性的新元素,增加它也不起作用,這是一種奇怪的,因爲加一個Polymer自定義元素確實工作。);如添加新元素時告訴Polymer,以便可以正確升級?

+0

_is_應該用於聚合物元素,而不是常規形式或對照。聚合物元素僅在創造時才被「升級」。只需用新的自定義標籤替換現有的元素,並且一切都應該正常工作。 – dandavis 2015-02-08 02:29:59

+0

我不知道_Polymer_,但我會指出,任何導致_HTML_的重新演繹(從_String_,例如'.innerHTML')銷燬所有由先前的元素和它們的屬性。你可能會遇到這種效果。 – 2015-02-08 02:31:05

+0

@dandavis:這不是文檔所說的 - 請參閱https://www.polymer-project.org/docs/elements/core-elements.html#core-input。而且我無法使用自定義標籤,因爲表單停止工作。 – 2015-02-08 02:38:05

回答

2

要使用is=,你必須延伸的本土元素。這些被稱爲類型擴展自定義元素(http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#usetypeextension)。

一般情況下,我不相信在以後的時間添加is=屬性對升級元素的任何影響。該元件需要聲明前面與is=(例如<input is="core-input">)或動態使用的createElement的特殊版本實例:

var input = document.createElement('input', 'core-input'); 

在聲明的情況下,這是解析器信號以改變所述元件的原型時,它的看到。在JS案例中,這是在創建時完成的。如果您只是使用el.setAttribute('is', 'core-input'),則該元素的原型已經由該點創建,因此它不起作用。

+0

這是一個本地元素---它是一個「」。你有第二部分的參考嗎?這並不是說我不相信你,但它似乎違反了HTML增量構建DOM層次結構的能力,並且我想知道這是HTML的基本問題還是僅僅是Polymer中的一個錯誤。 – 2015-02-09 04:29:45

+0

看來數據綁定的「is」屬性也不起作用。聚合物不支持它,或者它在重複模板中不起作用。 注意:我也試過綁定「is $ = {{customElement}}」。即使該屬性在DOM中顯示的值正確,它仍然不會綁定該元素。 – 2015-06-22 03:37:10