webcomponents / webcomponents/polyfills

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

Open
#291 2 comments 4 reactions 1 assignee Claimed by @aomarks View on GitHub
Package: template Type: Bug wontfix
Dominant language
HTML
Stars
1.2k
Forks
168
PR merge metrics
No merged PRs in 30d

Description

#### 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](https://github.com/webcomponents/polyfills/blob/13e4ff7134dfefedbd11cceed05e8332d18e25a4/packages/template/template.js#L340), and if it's already fired it won't actually do anything to existing ``s.

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

This has come up because the [open-wc](https://open-wc.org/) build tooling loads the web component polyfill asynchronously by [appending script elements](https://github.com/open-wc/open-wc/blob/ca2954822440dbb218420be99dfbd2df03760dbd/packages/polyfills-loader/src/create-polyfills-loader.js#L37). 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 `` 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.