webcomponents / webcomponents/polyfills
Polyfill not loaded when upgrade is not a function
- Dominant language
- HTML
- Stars
- 1.2k
- Forks
- 168
- PR merge metrics
- No merged PRs in 30d
Description
### Description
The polyfill is not loaded when the browser version has `CustomElementRegistry.define` but doesn't have `CustomElementRegistry.upgrade`.
### Example
// Uncomment below to make it work regardless
// window.customElements = window.customElements || {};
// window.customElements.forcePolyfill = true;
"use strict";
var __extends = (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var el = document.createElement("spider-man");
var log = document.querySelector('#log');
var SpiderMan = /** @class */ (function (_super) {
__extends(SpiderMan, _super);
function SpiderMan() {
return _super !== null && _super.apply(this, arguments) || this;
}
return SpiderMan;
}(HTMLElement));
customElements.define("spider-man", SpiderMan);
// Expected to be false
console.log('instance of', (el instanceof SpiderMan)) // not yet upgraded
log.innerHTML = 'instance of ' + (el instanceof SpiderMan);
customElements.upgrade(el);
// Expected to be true
console.log('instance of', (el instanceof SpiderMan)) // upgraded!
log.innerHTML = 'instance of ' + (el instanceof SpiderMan);
### Steps to reproduce
Launch the app on an older browser that has the `define` method but not the `upgrade` method.
Check the console logs.
#### Expected behavior
The polyfill is installed correctly and the code completes without an error being thrown.
#### Actual behavior
The polyfill isn't installed causing errors (`customElements.upgrade is not a function`) on browser versions that partly support custom elements.
### Version
2.8.0
### Browsers affected
- [X] Chrome
- [ ] Firefox
- [ ] Edge
- [X] Safari
- [ ] IE 11
Only experienced it on some Smart TVs (Tizen 4.0 which has Chrome v56 and Tizen 5.0 which has Chrome v63), but according to the [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry#browser_compatibility) table Safari would also have this issue.
Looking through the files it seems this part needs an extra check to see if `upgrade` is defined: https://github.com/webcomponents/polyfills/blob/master/packages/custom-elements/ts_src/custom-elements.ts#L57
Contributor guide
Assessment
This issue has not been assessed yet.