javascript - 无法使用 querySelector 在模板中找到元素 - Polymer

Question

当我尝试从外部文件中查询选择器模板标签内的元素时，我得到了未定义的信息，经过一些搜索后，我发现唯一的解决方案是“shadowRoot”，但是当我尝试使用它时，我得到了“shadowRoot is not”定义'。

Answer 1

以下代码对我来说工作正常(jsbin):

<template is="auto-binding" id="tmpl">
  <h1>Hello from {{foo}}</h1>
</template>

<script>
  document.addEventListener('polymer-ready', function() {
    var tmpl = document.querySelector('#tmpl');
    tmpl.foo = 'my thing';
  });
</script>

我添加了 polymer-ready 事件，因为在尝试使用它们之前等待所有元素准备就绪通常是一个很好的做法。

编辑:OP 想知道如何在模板中查找元素

要在模板中定位元素，您需要使用模板的content 关键字querySelector。这是为了防止意外选择模板内的内容(例如，如果您要查询页面上所有 p 标记的选择器，您可能不希望在模板内使用 p 标记一个尚未被淘汰的模板)。

这是一个示例，它更改了 template ( jsbin ) 中的 h2

<template is="auto-binding" id="tmpl">
  <h1>Hello from {{foo}}</h1>
  <h2>Another header</h2>
</template>

<script>
  document.addEventListener('polymer-ready', function() {
    var tmpl = document.querySelector('#tmpl');
    tmpl.foo = 'my thing';
    var h2 = tmpl.content.querySelector('h2');
    h2.textContent = 'hello world';
  });
</script>