开发者问题收集

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

2014-09-24
15458

当我尝试从外部文件 querySelector 模板标签内的元素时,我得到了未定义的结果,经过一番搜索后,我找到的唯一解决方案是“shadowRoot”,但当我尝试使用它时,我得到了“shadowRoot 未定义”。

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 内的 h2 的示例( jsbin

<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>
robdodson
2014-09-24