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标记已被盖章了。）

以下是更改h2（jsbin）

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

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

1 个答案: