Question

我非常（非常）对Polymer很新，我正在尝试创建我的第一个组件。我创建了一个Plunker，但由于某种原因它不起作用：http://plnkr.co/edit/RbcBuO9y8SUHyKqe7OJA

无论如何，你可以在那里看到我的代码。

它有一个组件blob-component.html，这是非常基本的。它只有一个标签和标签的内容。

在index.html上，我想在点击按钮时更新这两个。

在Plunker中，组件没有解析组件，因此我们只显示innerHTML，但是当我在开发环境中运行时，我会看到标签显示（两次，如定义）。

但是，当我尝试单击按钮进行设置时，出现错误：

http://localhost:50169/Content/WebComponents/Polymer/webcomponentsjs/webcomponents.js中的未处理异常 0x80070057 - JavaScript运行时错误：参数无效。

发生在

unsafeUnwrap(this).data = value;

如果我输入断点，那么我可以看到

此是已定义的对象

e =“更新标签初始标签”

正如您所看到的，我也尝试使用setAttribute（）而不是仅仅分配值，但我遇到了同样的问题。

这显然非常简单，但我无法理解为什么会这样。

这是在IE11中。在Chrome中，我没有收到错误，但单击按钮时标签会消失。

有什么建议吗？感谢。

Answer 1

您的示例有两个问题。我正在尝试这是Chrome，但也应修复其他浏览器。

首先，您应该注意到由于CORS，您的polymer.html导入失败。在plunker，jsbin等中，您可以使用polygit

http://polygit.org/components/polymer/polymer.html

更改innerHTML时出现第二个问题。使用Shady DOM（默认设置）时，通过设置innerHTML属性，您只需删除在<dom-module>内声明的所有内容。在Chrome中你可以通过强制使用Shadow DOM来解决这个问题，但它仍然无法在Firefox / IE / Safari中按预期工作。

现在你应该避免完全替换内部HTML并且逐个节点地使用DOM或者用另外的容器包装标签内容：

<blob-component id="p">
  <div>
    Flip
  </div>
</blob-component>

<script>
   function changeLabels() {
     var blob = document.getElementById("p");
     blob.querySelector('div').innerHTML = "Flop";
   }
</script>

聚合物设置属性Javascript错误

1 个答案: