在可重复使用的 Polymer 组件中的元素上使用 ID 是否安全？答案

【问题标题】：Is it safe to use IDs on elements inside reusable Polymer components?在可重复使用的 Polymer 组件中的元素上使用 ID 是否安全？
【发布时间】：2016-05-18 20:37:00
【问题描述】：

Polymer 0.5 FAQ 对此有如下说明：

我的组件正在生成具有多个同名 ID 的标记。

Shadow DOM polyfill 努力模仿原生 Shadow DOM，因为具有相同 id 的节点仍将被封装。

但是，在使用 polyfill 时，您应该避免使用 DOM 级别的 id 引用（例如 <label for>）。在 Shadow DOM polyfill 下，id 可能无法正确解析。

在 Polymer 1.x 中这仍然适用吗？如果我执行 document.getElementById，那不是总是返回 DOM 中具有该 ID 的第一个元素吗？如果一个 Polymer 组件被重用，我是否需要先将我的范围限制为感兴趣的组件，然后调用 component.getElementById（或 Polymer 的 component.$.ID）？

这当然也对通过测试框架访问元素有影响。另一种方法是使用类来访问组件中的元素（例如 component.$$('.myClass')），但使用 ID 似乎更简洁，而且通常更合适。非常感谢您对此进行更多澄清。

【问题讨论】：

标签： javascript dom polymer polymer-1.0

【解决方案1】：

在同一页面上多次使用一个 ID 绝不是“安全的”。任何可重用的组件都应该始终使用类。您已经确定了这样做有风险的许多原因 - 但也请记住，当您有多个使用相同 ID 名称的实例时，您将无法使用基本的 JS 函数，例如 getElementByID()。

【讨论】：

我对这个答案感到不舒服。 Polymer.Base $ 映射不是让人联想到组件开发人员通过 id 来处理本地 dom 元素吗？
也许——在进一步阅读之后，看起来 Polymer 可能映射到 DOM 节点而不是 ID。如果是这种情况，虽然使用多个具有相同名称的 ID 可能会导致其他问题，但 Polymer 可能不在乎。