Polymer 是一个基于 Web Components 的前端框架，它提供了一种简单易用的方式来创建自定义元素和组件。然而，当我们尝试在 Polymer 中添加动态内容时，可能会遇到一些问题。本文将介绍如何在 Polymer 中正确添加动态内容，以及如何避免常见的错误。
问题描述
在 Polymer 中，我们可以通过使用 dom-repeat 模板来动态生成元素。例如，下面的代码将生成一个包含一组数据的列表：
<template is="dom-repeat" items="{{list}}">
<div>{{item}}</div>
</template>然而，当我们尝试在生成的元素中添加更多的动态内容时，可能会遇到问题。例如，下面的代码将尝试在列表项中添加一个按钮：
<template is="dom-repeat" items="{{list}}">
<div>
{{item}}
<button>Click me</button>
</div>
</template>在这种情况下，按钮可能无法正常工作。这是因为在 Polymer 中，动态添加的内容并不会自动绑定到元素的属性或方法上。因此，我们需要采取一些额外的措施来确保动态内容能够正常工作。
解决方案
在 Polymer 中，我们可以使用 Polymer.dom API 来操作动态内容。例如，下面的代码将为每个列表项添加一个按钮，并在按钮上绑定一个点击事件：
<template is="dom-repeat" items="{{list}}">
<div>
{{item}}
<button on-click="_handleClick">Click me</button>
</div>
</template>Polymer({
_handleClick: function(event) {
// 处理按钮点击事件
}
});在 _handleClick 方法中，我们可以使用 Polymer.dom API 来访问动态添加的按钮。例如，下面的代码将在控制台中打印出按钮的文本内容：
_handleClick: function(event) {
var button = Polymer.dom(event).localTarget;
console.log(button.textContent);
}在这个例子中，Polymer.dom(event) 将事件对象转换为 Polymer 的 DOM 对象，然后我们可以使用 localTarget 属性来访问事件目标元素。
常见错误
在使用 Polymer 中，有一些常见的错误可能会导致动态内容无法正常工作。以下是其中一些错误：
直接操作 Shadow DOM
在 Polymer 中，每个元素都有一个 Shadow DOM，用于封装元素的样式和行为。然而，在某些情况下，我们可能会尝试直接访问元素的 Shadow DOM，例如：
var element = document.querySelector('my-element');
var shadow = element.shadowRoot;这种做法可能会导致一些问题，因为在 Polymer 中，Shadow DOM 是由框架自动管理的。因此，我们应该尽可能地使用 Polymer.dom API 来访问元素的 Shadow DOM。
忘记使用 Polymer.dom
在添加动态内容时，我们需要使用 Polymer.dom API 来访问动态添加的元素。然而，在某些情况下，我们可能会忘记使用 Polymer.dom，例如：
var element = document.querySelector('my-element');
var div = document.createElement('div');
element.appendChild(div);这种做法可能会导致动态添加的元素无法正常工作。因此，我们应该始终使用 Polymer.dom API 来操作动态添加的元素。
示例代码
下面的代码演示了如何在 Polymer 中正确添加动态内容：
-- -------------------- ---- -------
----------- ----------------
----------
--------- --------------- -----------------
-----
--------
------- ----------------------------- -----------
------
-----------
-----------
-------------
--------
---------
--- -------------
----------- -
----- -
----- ------
------ ---------- -
------ ------ --- ----- --- ----- ----
-
-
--
------------- --------------- -
--- ------ - -------------------------------
--------------------------------
-
---
---------结论
在 Polymer 中，正确添加动态内容是非常重要的。通过使用 Polymer.dom API 和避免常见的错误，我们可以确保动态内容能够正常工作，并为我们的应用程序带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677a08c55c5a933a340ff787
