webcomponents/webcomponentsjs

instance.constructor property is wrong in Safari and IE

lazd opened this issue · 5 comments

lazd commented

I saw today that custom elements created with webcomponents.js have a constructor property of HTMLUnknownElementConstructor in Safari and HTMLUnknownElement in IE.

Is this an unavoidable side-effect of the polyfill? I would expect it to be the same constructor returned by document.registerElement.

Test code:

var ATag = document.registerElement('a-tag', { prototype: HTMLElement });
var aTag = new ATag();
aTag instanceof ATag // true in Safari, Chrome, etc
aTag.constructor === ATag // false in Safari and IE, but true in Firefox, Chrome

IE doesn't work particularly well with unknown element types and marks them as HTMLUnknownElement, whilst afaik, WebKit aliases HTMLUnknownElement to HTMLUnknownElementConstructor (unavoidable to the best of my knowledge). Is there a specific use-case where the difference in polyfilled constructor behavior is causing breakage?

lazd commented

I was attempting to infer the constructor of an instance using the instance.constructor property and realized the code failed on Safari.

Sounds like this is expected and unavoidable, let's document it somewhere.

Documented in FAQs section of README.md.

Is there any recommended way currently to get the constructor class of a CustomElement?
it seems the element.__proto__.__proto__.constructor will return the extended class instead? whereas element.__proto__ returns a function instead of the class itself?

Is this relevant for v1? I could not reproduce the problem.