如何使用没有shadowRoot的模板? [英] How to use a template without a shadowRoot?

问题描述

我希望两个togglePanels()之一可以工作，但它们不能工作吗?

I expected one of the two togglePanels() to work but they do not?

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

还请注意，在我的控制台中它说的是#document-fragment而不是#shadowRoot，因为我无法将其包装在聚合物元素中，这样其他js框架就不会损坏.

Also note that in my console it says #document-fragment instead of #shadowRoot because I can not wrap it in a polymer element, so that the other js frameworks do not break.

原来我需要做document.querySelector('core-drawer-panel').togglePanel()，但这使我想到了核心抽屉面板尚未准备好的问题.会问另一个问题.

Turns out I needed to do document.querySelector('core-drawer-panel').togglePanel() but that brings me to the problem core-drawer-panel is not ready yet. Will ask in a other question.

推荐答案

默认情况下，<template>不是不插入可见的DOM中.这就是为什么页面内什么都看不到的原因.

Per default <template> is not inserted into the your visible DOM. This is why you don't see anything within your page.

您应该先附加template，然后等待页面加载.就是这样:

You should do append the template first and then wait for the page is loaded. Just do it like this:

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

请注意:<template>的内容没有没有隔离.只有<core-drawer-panel>会带来他自己的影子根源.

Please note: There is no isolation of the content of the <template>. Only the <core-drawer-panel> brings his own shadow root.

这篇关于如何使用没有shadowRoot的模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！