找不到里面有querySelector模板元素 - 聚合物

Question

当我尝试从querySelector外部文件我得到了一个未定义的模板标签中的元素，经过搜索，我发现的唯一解决方案的一点点是“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想知道如何找到一个模板

中的元素要找到一个模板中的元素，你会使用该模板的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>