更改问题'是'在聚合物中动态

Problems changing 'is' dynamically in Polymer

本文关键字：聚合物 动态 问题      更新时间：2023-09-26

我正在尝试将Polymer UI添加到包含表单的现有HTML页面中。我无法控制页面的内容，只能控制页眉和页脚，因此我无法将表单更改为使用Polymer元素而不是<input>。因此，我尝试使用Javascript重写表单。

我发现向现有元素添加is属性没有任何效果——元素不会被加载。

我认为这一切都发生在Polymer扫描DOM寻找is属性之后，所以它没有注意到我的变化。（尽管创建一个具有is属性的新元素并添加它也不起作用，这有点奇怪，因为添加Polymer自定义元素确实起作用。）

有什么办法解决这个问题吗；比如告诉Polymer我何时添加新元素，以便它可以正确升级？

若要使用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')，那么元素的原型已经在该点创建，因此它没有任何效果。

相关文章：