webcomponents / webcomponents/polyfills
[Template] If loaded after DOMContentLoaded, templates aren't upgraded
- 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
Assessment
This issue has not been assessed yet.