webcomponents / webcomponents/polyfills

Polyfill not loaded when upgrade is not a function

Open
#565 1 comment 0 reactions 0 assignees View on GitHub
Focus Area: Standards & Polyfills Type: Bug wontfix
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

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.