使用querySelector - Polymer找不到模板内的元素

Question

当我尝试从外部文件中查询一个模板标签内的元素时,我得到了未定义的内容,经过一些搜索,我发现的唯一解决方案是'shadowRoot',但是当我尝试使用它时,我得到了'shadowRoot未定义'.

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想知道如何在模板中找到元素

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

这是一个改变(jsbin)h2内部的例子template

<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>