diff --git a/bundles/bundle-all.js b/bundles/bundle-all.js index 7d50e50..ec39aa8 100644 --- a/bundles/bundle-all.js +++ b/bundles/bundle-all.js @@ -21,7 +21,7 @@ import '../node_modules/webcomponents-platform/webcomponents-platform.js' //------ template ------ import '../node_modules/@webcomponents/template/template.js' //------ es6-promise ------ -import '../node_modules/es6-promise/dist/es6-promise.auto.min.js' +import '../node_modules/es6-promise/lib/es6-promise.auto.js' //------ pre-polyfill ------ import '../node_modules/webcomponents.js/src/pre-polyfill.js' //------ shadydom ------ diff --git a/dist/web-component-polyfills.js b/dist/web-component-polyfills.js index 0448a4b..468f7a3 100644 --- a/dist/web-component-polyfills.js +++ b/dist/web-component-polyfills.js @@ -130,28 +130,108 @@ // minimal template polyfill (function () { + 'use strict'; var needsTemplate = typeof HTMLTemplateElement === 'undefined'; + var brokenDocFragment = !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment); + var needsDocFrag = false; - // NOTE: Patch document.importNode to work around IE11 bug that - // casues children of a document fragment imported while - // there is a mutation observer to not have a parentNode (!?!) - // It's important that this is the first patch to `importNode` so that - // dom produced for later patches is correct. + // NOTE: Replace DocumentFragment to work around IE11 bug that + // casues children of a document fragment modified while + // there is a mutation observer to not have a parentNode, or + // have a broken parentNode (!?!) if (/Trident/.test(navigator.userAgent)) { (function () { - var Native_importNode = Document.prototype.importNode; - Document.prototype.importNode = function () { - var n = Native_importNode.apply(this, arguments); - // Copy all children to a new document fragment since - // this one may be broken - if (n.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { - var f = this.createDocumentFragment(); - f.appendChild(n); - return f; + + needsDocFrag = true; + + var origCloneNode = Node.prototype.cloneNode; + Node.prototype.cloneNode = function cloneNode(deep) { + var newDom = origCloneNode.call(this, deep); + if (this instanceof DocumentFragment) { + newDom.__proto__ = DocumentFragment.prototype; + } + return newDom; + }; + + // IE's DocumentFragment querySelector code doesn't work when + // called on an element instance + DocumentFragment.prototype.querySelectorAll = HTMLElement.prototype.querySelectorAll; + DocumentFragment.prototype.querySelector = HTMLElement.prototype.querySelector; + + Object.defineProperties(DocumentFragment.prototype, { + 'nodeType': { + get: function get() { + return Node.DOCUMENT_FRAGMENT_NODE; + }, + configurable: true + }, + + 'localName': { + get: function get() { + return undefined; + }, + configurable: true + }, + + 'nodeName': { + get: function get() { + return '#document-fragment'; + }, + configurable: true + } + }); + + var origInsertBefore = Node.prototype.insertBefore; + function insertBefore(newNode, refNode) { + if (newNode instanceof DocumentFragment) { + var child; + while (child = newNode.firstChild) { + origInsertBefore.call(this, child, refNode); + } + } else { + origInsertBefore.call(this, newNode, refNode); + } + return newNode; + } + Node.prototype.insertBefore = insertBefore; + + var origAppendChild = Node.prototype.appendChild; + Node.prototype.appendChild = function appendChild(child) { + if (child instanceof DocumentFragment) { + insertBefore.call(this, child, null); + } else { + origAppendChild.call(this, child); + } + return child; + }; + + var origRemoveChild = Node.prototype.removeChild; + var origReplaceChild = Node.prototype.replaceChild; + Node.prototype.replaceChild = function replaceChild(newChild, oldChild) { + if (newChild instanceof DocumentFragment) { + insertBefore.call(this, newChild, oldChild); + origRemoveChild.call(this, oldChild); } else { - return n; + origReplaceChild.call(this, newChild, oldChild); + } + return oldChild; + }; + + Document.prototype.createDocumentFragment = function createDocumentFragment() { + var frag = this.createElement('df'); + frag.__proto__ = DocumentFragment.prototype; + return frag; + }; + + var origImportNode = Document.prototype.importNode; + Document.prototype.importNode = function importNode(impNode, deep) { + deep = deep || false; + var newNode = origImportNode.call(this, impNode, deep); + if (impNode instanceof DocumentFragment) { + newNode.__proto__ = DocumentFragment.prototype; } + return newNode; }; })(); } @@ -160,9 +240,33 @@ // This means this polyfill must load before the CE polyfill and // this would need to be re-worked if a browser supports native CE // but not