How to use a template without a shadowRoot?

问题

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>

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.

EDIT: 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.

回答1:

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

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>

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

回答2:

I suspect that the issue is that you aren't waiting for the polymer-ready event, so the template hadn't yet been expanded.

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

来源：https://stackoverflow.com/questions/26899319/how-to-use-a-template-without-a-shadowroot

标签

polymer