From 8eb05964639ea66e602f3c145728cb63ced706cd Mon Sep 17 00:00:00 2001 From: crisbeto Date: Wed, 11 Dec 2019 22:03:00 +0100 Subject: [PATCH] fix(ivy): unknown property and element checks not working correctly in IE (#34305) We have a couple of cases where we use something like `typeof Node === 'function'` to figure out whether we're in a worker context. This works in most browsers, but IE returns `object` instead of `function`. I've updated all the usages to account for it. PR Close #34305 --- packages/core/src/render3/instructions/element.ts | 5 ++++- packages/core/src/render3/instructions/shared.ts | 10 ++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/core/src/render3/instructions/element.ts b/packages/core/src/render3/instructions/element.ts index c40219ce66..1d18aed601 100644 --- a/packages/core/src/render3/instructions/element.ts +++ b/packages/core/src/render3/instructions/element.ts @@ -271,7 +271,10 @@ function validateElement( // as a custom element. Note that unknown elements with a dash in their name won't be instances // of HTMLUnknownElement in browsers that support web components. const isUnknown = - (typeof HTMLUnknownElement === 'function' && element instanceof HTMLUnknownElement) || + // Note that we can't check for `typeof HTMLUnknownElement === 'function'`, + // because while most browsers return 'function', IE returns 'object'. + (typeof HTMLUnknownElement !== 'undefined' && HTMLUnknownElement && + element instanceof HTMLUnknownElement) || (typeof customElements !== 'undefined' && tagName.indexOf('-') > -1 && !customElements.get(tagName)); diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts index fd9ad77efa..d5d7149930 100644 --- a/packages/core/src/render3/instructions/shared.ts +++ b/packages/core/src/render3/instructions/shared.ts @@ -1011,8 +1011,14 @@ function validateProperty( hostView: LView, element: RElement | RComment, propName: string, tNode: TNode): boolean { // The property is considered valid if the element matches the schema, it exists on the element // or it is synthetic, and we are in a browser context (web worker nodes should be skipped). - return matchingSchemas(hostView, tNode.tagName) || propName in element || - isAnimationProp(propName) || typeof Node !== 'function' || !(element instanceof Node); + if (matchingSchemas(hostView, tNode.tagName) || propName in element || + isAnimationProp(propName)) { + return true; + } + + // Note: `typeof Node` returns 'function' in most browsers, but on IE it is 'object' so we + // need to account for both here, while being careful for `typeof null` also returning 'object'. + return typeof Node === 'undefined' || Node === null || !(element instanceof Node); } export function matchingSchemas(hostView: LView, tagName: string | null): boolean {