在元素上设置属性会给出错误“无法使用 Polymer 设置属性 '...' of undefined'答案

【问题标题】：Setting attribute on element gives error "Cannot set property '...' of undefined' with Polymer在元素上设置属性会给出错误“无法使用 Polymer 设置属性 '...' of undefined'
【发布时间】：2016-07-15 22:16:59
【问题描述】：

我正在尝试使用聚合物设置一个自定义元素，该元素由一个带有图标的可拖动框组成。我希望能够通过在元素上指定 icon 属性来定义图标，这样我就可以声明性地创建元素，而不是在元素上定义 setIcon 方法，该方法只能通过 javascript 访问。

我试图设置我的元素来处理属性，方法是在我输入聚合物的元素原型上包含一个properties 属性，给我的元素代码看起来像这样：

var elementProto = {
    is : "my-element",
    behaviors : [someOtherProto],
    properties : {
        icon : {
            "type" : "String",
            "observer" : "_iconObserver",
        }
    },
    _iconObserver : function(){ /* Functionality for adding icon */}
};

elementProto.otherMethods = various functions;

Polymer(elementProto);

在另一个文件中，我尝试在另一个 javascript 函数中使用setAttribute 设置我的图标属性（在通过关联的 html 文件导入我的新元素之后），如下所示：

var newElement = document.createElement("my-element");
newElement.setAttribute("icon", "some/icon/path.png");

理想情况下，这会以新路径作为参数触发我的观察者函数，并且我会将新元素中图像的 URL 设置为该路径的任何内容。相反，Chrome 给了我这个错误：

Uncaught TypeError: Cannot set property 'icon' of undefined

为什么会出现此错误，我该如何解决？

调试注意事项：

我已经深入研究了聚合物代码，发现错误来自这一行：

var model = this._clientsReadied ? this : this._config;

this._clientsReadied 和this._config 都未定义，这导致._setAttributeToProperty(model, name); 方法中出现此错误，其中name 被设置为model 的属性。不过，我对聚合物的了解还不够，不知道为什么这些属性是未定义的。

【问题讨论】：

您是否尝试过使用聚合物的set 方法，例如elementRef.set('property', 'value')？
@Alan 我试过element.setAttribute、element.set、Polymer.dom(element).set（未定义）和Polymer.dom(element).setAttribute。
你知道，我尝试用你的代码创建一个fiddle，它工作得很好......也许你缺少一些导入？

标签： javascript polymer custom-element

【解决方案1】：

为什么会出现此错误，我该如何解决？

您收到此错误是因为在您调用 createElement() 时，您的自定义元素尚未注册。可能是因为这2个文件的解析顺序错误。

要解决此问题，您可以尝试更改导入文件的顺序，也可以等待HTMLImportsLoaded 或WebComponentsReady 事件。

document.addEventListener("HTMLImportsLoaded", function () 
{
    var newElement = document.createElement("my-element");
    newElement.setAttribute("icon", "some/icon/path.png");
});

【讨论】：