Polymer 如何使用没有阴影根的模板？

我希望两个TogglePanel（）中的一个可以工作，但它们不能

<template>
    <core-drawer-panel forceNarrow>
    </core-drawer-panel>
</template>

<script>
    var t = document.querySelector('template');
    t.querySelector('core-drawer-panel').togglePanel()
    t.shadowRoot.querySelector('core-drawer-panel').togglePanel()
</script>

var t=document.querySelector（'template'）；
t、 querySelector（'core-drawer-panel'）。togglePanel（）
t、 shadowRoot.querySelector（'core-drawer-panel'）.togglePanel（）

还要注意的是，在我的控制台中，它说的是#document fragment而不是#shadowRoot，因为我不能将其包装在聚合元素中，这样其他js框架就不会崩溃

---

编辑：原来我需要执行

document.querySelector（'core-drawer-panel'）。togglePanel（）

，但这就带来了一个问题：core-drawer-panel还没有准备好。将在另一个问题中提问。

我怀疑问题在于您没有等待polymer ready事件，因此模板尚未展开

<script>
  // need to wait for initialization to complete
  document.addEventListener('polymer-ready', function() {
    var t = document.querySelector('template');
    t.querySelector('core-drawer-panel').togglePanel()
    t.shadowRoot.querySelector('core-drawer-panel').togglePanel()
  });
</script>

//需要等待初始化完成
document.addEventListener（'polymer-ready'，function（）{
var t=document.querySelector（'template'）；
t、 querySelector（'core-drawer-panel'）。togglePanel（）
t、 shadowRoot.querySelector（'core-drawer-panel'）.togglePanel（）
});
默认值
未插入可见DOM中。这就是为什么在页面中看不到任何内容

您应该先附加
模板
，然后等待页面加载。就这样做吧：

<div id="insertTemplateHere">
  <template>
    <core-drawer-panel forceNarrow></core-drawer-panel>
  </template>
</div>

<script>
// with jQuery: wait until page is ready
$(document).ready(function() {
  // grab the element, where you want to insert the template
  var page = document.querySelector('#insertTemplateHere');

  // grab the template itself and read the whole content into `clone`
  var template = document.querySelector('template');
  var clone = document.importNode(template.content, true);

  // append the content into the previously grabbed element
  page.appendChild(clone);

  // now use the element within the template
  template.querySelector('core-drawer-panel').togglePanel();

  // you don't need the shadowRoot, since you don't have any
  // template.shadowRoot.querySelector('core-drawer-panel').togglePanel();
});

// native: wait until page is ready (works on ~90% of all global browsers used)
document.addEventListener("DOMContentLoaded", function(event) { 
  // grab the element, where you want to insert the template
  var page = document.querySelector('#insertTemplateHere');

  // grab the template itself and read the whole content into `clone`
  var template = document.querySelector('template');
  var clone = document.importNode(template.content, true);

  // append the content into the previously grabbed element
  page.appendChild(clone);

  // now use the element within the template
  template.querySelector('core-drawer-panel').togglePanel();

  // you don't need the shadowRoot, since you don't have any
  // template.shadowRoot.querySelector('core-drawer-panel').togglePanel();
});
</script>


//使用jQuery：等待页面准备就绪
$（文档）.ready（函数（）{
//抓取要插入模板的元素
var page=document.querySelector（“#insertTemplateHere”）；
//抓取模板本身并将整个内容读入“克隆”`
var template=document.querySelector（'template'）；
var clone=document.importNode（template.content，true）；
//将内容附加到先前抓取的元素中
page.appendChild（克隆）；
//现在使用模板中的元素
template.querySelector（'core-drawer-panel'）.togglePanel（）；
//你不需要阴影根，因为你没有阴影根
//template.shadowRoot.querySelector（'core-drawer-panel'）.togglePanel（）；
});
//本机：等待页面准备就绪（适用于所有使用的全局浏览器的90%）
addEventListener（“DOMContentLoaded”，函数（事件）{
//抓取要插入模板的元素
var page=document.querySelector（“#insertTemplateHere”）；
//抓取模板本身并将整个内容读入“克隆”`
var template=document.querySelector（'template'）；
var clone=document.importNode（template.content，true）；
//将内容附加到先前抓取的元素中
page.appendChild（克隆）；
//现在使用模板中的元素
template.querySelector（'core-drawer-panel'）.togglePanel（）；
//你不需要阴影根，因为你没有阴影根
//template.shadowRoot.querySelector（'core-drawer-panel'）.togglePanel（）；
});

请注意：没有隔离
的内容。只有
才有自己的影子根。
我想在polymer之外使用一个模板，这样其他js框架就不会崩溃：）我不能将它包装在polymer元素里面，只能使用一个普通模板，里面有polymer元素。看起来你是对的：）因为document.querySelector（'core-drawer-panel'）。togglePanel（）仅在加载页面后工作。如何在polymer之外监视ready事件？document.addEventListener（'polymer-ready'，function（）{/*此处的代码*/}）；