Content of nested template is empty

[tomalec]

I'm not sure if it's a bug, template shim limitation, or desired behavior.

How can I get JS access to .content of nested <template>?

I'm trying to extend <template> with my imported-template element (which fetches template content from external file) and I would like to implement <imported-content> in similar manner to native <content>. To do so, I simply try

    this.content.querySelector("imported-content")

but it occurred, that for nested template this.content is empty.

JSFiddle
Stackoverflow

I thought it's because I use wrong life-cycle callback, so content is not yet/no longer there.
Therefore I tried createdCallback, attachedCallback, and event MutationObserver (jsfiddle), but none of those helped.

[robdodson]

/sub

[sjmiles]

<template> is sophisticated and does various work to ensure near-optimal memory usage when nesting templates. I suggest it's a bad idea to try to inject custom behavior into that system.

If I could better understand the outcome you are looking for, maybe we could find a way to achieve it without trying to augment template machinery.

[tomalec]

Thanks,
The overall idea is to provide a way to use external templates. I also like it to use HTML Imports, so caching, duplicate request, path resolution, <script> and <link> execution will be solved by browser.

Then our partial/external template could look like:
/path/to/file.html

<!-- loaded and executed only once per partial -->
<script src="relative/to/this/file/external.js"></script>
<link rel="import"
      href="path/polymer-ui-ratings.html">

<!-- stamped to main document and executed every time when `imported-template` is stamped -->
<template bind>
    Template content with <strong>{{data}}</strong><polymer-ui-ratings value="5"></polymer-ui-ratings>
    <script>
        console.info("inline script executed when template is stamped, ");
    </script>
</template>

in your main document
page.html

<template is="imported-template" content="/path/to/file.html"></template>

and give some data model

document.querySelector('template[is=imported-template]').model = {
  data: "data binding"
};

So far this works https://github.com/Juicy/imported-template some examples here (there are still some minor bugs, but general concept is proved)

---

But my biggest problem comes when I try to provide something similar to <content>, to be able to write:

<template is="imported-template" content="/path/to/file.html">
  <section><h2>Wrapped external template</h2>
    <imported-content></imported-content>
  </section>
</template>

So, I need to access this.content and search for <imported-content> at least when stamping template to DOM, to replace it with real imported content.

When imported-template is in DOM (not inside another template) I am able to get it in attachedCallback.
However when it is nested, this.content is empty.

I figured out that, there is this.ref_ pointing to <template is="imported-template"> node inside <template>.content but it smells to hacky to use this.

[sjmiles]

Custom elements provide a lot of machinery to customize behavior. I suspect there are creative solutions in that space that don't necessitate changing primitive behavior of template.

I'm sorry I can't be more concrete.

If you are convinced that template behavior must be changed, please post a fresh issue on https://github.com/Polymer/templatebinding/issues.