找不到裏面有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>