本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
我现在正在研究一个愚蠢的Polymer项目 ，该项目将解析Pokémon数据库并返回一张Pokémon的图片，然后在您的扬声器上说出生物的名字。 这是我的项目的源代码。
这是我第一次使用Polymer，我当然会在几个地方陷入困境。 最近，它试图返回我创建的Polymer对象的成员函数。 我花了很长时间才弄清楚这一点，因此我想在本教程中与您分享。
错误的方法
我有一个如下所示的Web组件：
<x -radial-buttons id="radial-button-template"></x>如果我尝试通过其ID访问它…
var temp = document.querySelector("#radial-button-template");
// returns <x -radial-buttons id="radial-button-template"></x> 我无法访问其中的任何功能。 它们返回undefined 。 所以，如果我尝试了这个：
var temp = document.querySelector("#radial-button-template");
temp.getFirstElement // returns undefined为什么会这样？
这是由于Shadow DOM的封装。 这既是礼物，也是诅咒。 在这种情况下，我将访问元素，而不是shadowRoot ，它将暴露附加到Shadow DOM对象的公共方法。
在下一步中，您将看到如何访问自定义元素中的成员函数，以及如何返回位于Web组件中更深层的节点。
Google的Polymer小组的Rob Dobson 在这篇博客文章中对此做了很好的解释。 埃里克·比德尔曼（Eric Bidleman）在其高级的Shadow DOM文章中更加详细地介绍了这一点。 我强烈建议您花时间阅读这些内容，以更好地了解此版本的DOM的工作方式。
一种方法
var btn = document.querySelector("x-radial-buttons");请注意，我没有使用哈希符号（＃）来访问元素，就好像它是一个ID。 相反，您只需要简单地引用聚合物元素本身的名称即可：
document.querySelector("x-radial-buttons");所以现在我可以写：
var temp = document.querySelector("x-radial-buttons");
// ALSO returns <x-radial-buttons id="radial-button-template"></x-radial-buttons>现在，我可以像这样访问所有成员：
var temp = document.querySelector("x-radial-buttons");
temp.getFirstElement
// returns <paper-radio-button label="English-US" id="paper_radio_btn_en-US" on-click="{{ changeAccentUS }}" role="radio" tabindex="0" aria-checked="false" aria-label="English-US"></paper-radio-button> 因此，我建议根本不要为您的polymer-element分配ID。 正如Rob在下面的注释中明确指出的那样，您可以查询所需的自定义元素（通过ID ， class ， attr或元素名称）并获得相同的结果。 这是他的示例： http : //jsbin.com/qikaya/2/edit
另一种方式…
您还可以获取聚合物元素的ID并访问成员函数。
这是通过使用“聚合物就绪”事件来完成的。 如文档所述：
Polymer解析元素定义并异步处理它们的升级。 如果您在有机会升级之前过早地从DOM中获取元素，则将使用纯HTML元素，而不是自定义元素。
而这正是我先前遇到的问题。 在Polymer有机会对其进行升级之前，我试图在我的Polymer polymer-element获取功能。 这是一个例子：
<head>
<link rel="import" href="path/to/x-foo.html">
</head>
<body>
<x-foo></x-foo>
<script>
window.addEventListener('polymer-ready', function(e) {
var xFoo = document.querySelector('x-foo');
xFoo.barProperty = 'baz';
});
</script>
</body>总之，只要包装了您准备在Polymer-ready事件中调用的函数，您就应该很好，并且可以从您的Polymer元素中调用函数。
我如何使用
(function (PokémonApp) {
// Grab inputs and button for speech-to-text
var form = document.querySelector('#player-form'),
input = document.querySelector('#player-input'),
playerElement = document.querySelector('#player-element'),
xPokémon = document.querySelector('#x-Pokémon'),
btnChangeAccent = document.querySelector('#btn-change-accent'),
radialButtonTemplate = document.querySelector("#radial-button-template"),
playerAccent = playerElement.getAttribute("accent");
// Take text from input & set it as the text that the speaker will say.
// Set the name of the Pokémon, which angular will then grab from the Pokémon DB
input.addEventListener('input', function (e) {
playerElement.setAttribute('text', input.value);
xPokémon.name = input.value;
});
// Say the text when button is pressed
form.addEventListener('submit', function (e) {
e.preventDefault();
playerElement.speak();
var btn = document.querySelector("x-radial-buttons");
btn.getFirstElement();
});<header>
<h1>article header h1</h1>
<p>This web app takes advantage of Web Components and Polymer to enable new HTML features in the browser.</p>
<p>
In this particular case, we are using <a href="https://github.com/passy/x-Pokémon">
the x-Pokémon web component </a> to pull the images from a database, as well as the
<a href="http://zenorocha.github.io/voice-elements/">voice-elements web component</a> to speak the name of the Pokémon we entered.
</p>
<h2>Change the accent</h2>
<x-radial-buttons id="radial-button-template"></x-radial-buttons>
</header>更多JavaScript学习
这可能会让您感到有些惊讶，但是Microsoft在许多开源JavaScript主题上有大量免费的学习知识，并且我们的使命是随着Microsoft Edge的到来创建更多内容。
这是我们团队关于HTML，CSS和JS的更广泛的学习系列：
- 使您的HTML / JavaScript更快的实用性能提示 （从响应设计到休闲游戏到性能优化的7个系列文章）
- 现代Web平台JumpStart （HTML，CSS和JS的基础知识）
- 使用HTML和JavaScript JumpStart开发通用Windows应用程序 （使用已经创建的JS来构建应用程序）
- 还有一些免费工具： Visual Studio社区 ， Azure试用版以及用于Mac，Linux或Windows的跨浏览器测试工具 。
本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您共享Microsoft Edge和新的EdgeHTML渲染引擎 。 在http://dev.modern.ie/上获得免费的虚拟机或在Mac，iOS，Android或Windows设备上进行远程测试。
From: https://www.sitepoint.com/access-member-functions-polymer-elements/
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
