如何访问聚合物元素中的成员功能

>本文探讨了聚合物对象中访问的成员功能，这是聚合物开发人员的常见挑战。 我们将检查正确且错误的方法，突出显示阴影DOM封装的作用。

钥匙要点

>访问聚合物对象成员通过元素名称直接函数（没有
• ID选择器）是推荐的方法。#>
• 事件可确保在尝试函数访问之前完全升级该元素，以防止 errors。polymer-ready 聚合物元素是可重复使用的自定义HTML元素，从而提高了Web开发效率。他们与各种JavaScript库和框架无缝合作。undefined>
• 不正确访问的陷阱

> 考虑一个Web组件：。 由于阴影DOM封装，试图通过ID访问其ID访问其功能失败。 返回的元素不会暴露内部功能；它们显示为

>。

<x id="radial-button-template"></x>document.querySelector("#radial-button-template")正确的方法undefined

方法1：直接元素名称访问

最直接的方法是直接在>中直接使用元素的标签名称

这绕过阴影域限制并提供对成员功能的直接访问。 由于这个原因，通常首选避免将ID分配给聚合物元素。

> querySelector

方法2：

var btn = document.querySelector("x-radial-buttons");
btn.getFirstElement; // Correctly returns the element

事件

> 如果您尝试在升级完成之前尝试访问功能，则聚合物的异步元素升级过程可能会导致问题。 polymer-ready事件解决了这一点：

这可以确保函数调用仅在聚合物元素完全初始化之后才发生。 polymer-ready

实用应用

window.addEventListener('polymer-ready', function(e) {
  var xFoo = document.querySelector('x-foo');
  xFoo.barProperty = 'baz'; // Access functions here
});

以下JavaScript片段演示了访问聚合物元素及其功能：

此代码在准备就绪后正确访问

。

(function(PokémonApp) {
  // ... (other code) ...

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    playerElement.speak();
    var btn = document.querySelector("x-radial-buttons");
    btn.getFirstElement(); // Correct access
  });

  // ... (rest of the code) ...
})(PokémonApp);

getFirstElement进一步学习资源x-radial-buttons

Microsoft提供了有关JavaScript和Web开发的广泛免费学习资源，包括有关性能优化，Web平台基础知识的教程以及使用HTML和JavaScript构建通用Windows应用程序。 这些资源以及视觉工作室社区和Azure试验等工具提供了全面的学习路径。 本文是Microsoft的Web开发系列的一部分。

>常见问题

本节已被省略，因为它包含了重写文章主体中已经涵盖的信息。 上面已经解决了有关聚合物元素，其功能和访问成员功能的方法的关键点。

>

以上是如何访问聚合物元素中的成员功能的详细内容。更多信息请关注PHP中文网其他相关文章！