[Template] If loaded after DOMContentLoaded, templates aren't upgraded

[dlockhart]

Description

I'm not sure if the polyfill is supposed to work this way, but if you load it after the DOMContentLoaded event fires, any templates in the main document are not upgraded. This is because the polyfill is listening for this event, and if it's already fired it won't actually do anything to existing <template>s.

Instead, it could check the readyState and execute immediately if DOMContentLoaded has already fired.

This has come up because the open-wc build tooling loads the web component polyfill asynchronously by appending script elements. That means the polyfill is loaded after DOMContentLoaded.

Live Demo

I've forked the template and modified it to load the polyfill asynchronously and try to peek at a template element: https://jsbin.com/pexohekaqa/1/edit?html,console

Steps to Reproduce

Example:

1. Have a document with a <template> in the body
2. Load the template polyfill asynchronously by appending it via JavaScript
3. Try to access the template's content property in IE11

Expected Results

Template's content is accessible.

Actual Results

Template's content is undefined in IE11.

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari
• [x] IE 11

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!