Access template from light dom

[baszczewski]

Description

I can't create my element which will use template from light dom. Template is empty when I am using also dom-bind or my-element inside other element shadow DOM.

Live Demo

http://jsbin.com/kenemaqive/1/edit?html,output

Steps to Reproduce

1. Create my-element, with function that will instantiate template gained from light DOM
2. Append template to my-element
3. Append my-element to dom-bind

Expected Results

Template inserted to my-element should be instantiated.

Actual Results

Template is not instanted if my-element is children of dom-bind template or part of any other element shadow dom content.

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• IE 11
• Safari 8

Versions

• Polymer: v2.0.0-rc.8
• webcomponents: v1.0.0

[kevinpschaaf]

This is due to an optimization that Polymer.TemplateStamp (used by Polymer.Element and dom-bind) does to enable faster template stamping: it caches and removes any template.content for nested templates, and then re-installs the content after the template has been stamped. This helps eliminate the cost of recursively cloning nested templates.

You have two choices:

1. Opt out of all polymer template features altogether by adding the preserve-content attribtue to the template: http://jsbin.com/yiviyil/edit?html,output
2. Use a Polymer.TemplateStamp-provided static method to retrieve the cached content for the template: _contentForTemplate(template). Unfortunately I just discovered a bug in that API, since it's referencing the wrong private variable to retrieve the content 😔. I'll keep this issue open to resolve that issue. Here's a jsBin showing what that API should be doing: http://jsbin.com/yiviyil/edit?html,output. We'll get this fixed in the first bugfix release for Polymer 2.0. :)