[ShadyDOM] Add option for on-demand patching

packages/shadydom/src/link-nodes.js

@@ -11,9 +11,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 import * as utils from './utils.js';
 import {shadyDataForNode, ensureShadyDataForNode} from './shady-data.js';
 import {patchInsideElementAccessors, patchOutsideElementAccessors} from './patch-instances.js';
+import {patchNodeProto} from './patch-prototypes.js';
+
+const OutsideAccessors = 1;
+const InsideAcccessors = 2;
+
+const patchOnDemand = utils.settings.patchOnDemand;
+const hasDescriptors = utils.settings.hasDescriptors;
+
+function patchNode(node, type) {
+  if (patchOnDemand) {
+    patchNodeProto(node);
+  } else if (!hasDescriptors) {
+    if (type === OutsideAccessors) {
+      patchOutsideElementAccessors(node);
+    } else if (type === InsideAcccessors) {
+      patchInsideElementAccessors(node);
+    }
+  }
+}
 
 function linkNode(node, container, containerData, ref_node) {
-  patchOutsideElementAccessors(node);
+  patchNode(node, OutsideAccessors);
   ref_node = ref_node || null;
   const nodeData = ensureShadyDataForNode(node);
   const ref_nodeData = ref_node ? ensureShadyDataForNode(ref_node) : null;
@@ -46,7 +65,7 @@ function linkNode(node, container, containerData, ref_node) {
 }
 
 export const recordInsertBefore = (node, container, ref_node) => {
-  patchInsideElementAccessors(container);
+  patchNode(container, InsideAcccessors);
   const containerData = ensureShadyDataForNode(container);
   if (containerData.firstChild !== undefined) {
     containerData.childNodes = null;
@@ -106,13 +125,13 @@ export const recordChildNodes = (node, adoptedParent) => {
   nodeData.childNodes = null;
   const first = nodeData.firstChild = node[utils.NATIVE_PREFIX + 'firstChild'];
   nodeData.lastChild = node[utils.NATIVE_PREFIX + 'lastChild'];
-  patchInsideElementAccessors(node);
+  patchNode(node, InsideAcccessors);
   for (let n = first, previous; n; (n = n[utils.NATIVE_PREFIX + 'nextSibling'])) {
     const sd = ensureShadyDataForNode(n);
     sd.parentNode = adoptedParent || node;
     sd.nextSibling = n[utils.NATIVE_PREFIX + 'nextSibling'];
     sd.previousSibling = previous || null;
     previous = n;
-    patchOutsideElementAccessors(n);
+    patchNode(n, OutsideAccessors);
   }
 }

packages/shadydom/src/patch-prototypes.js

@@ -13,7 +13,7 @@ import {EventTargetPatches} from './patches/EventTarget.js';
 import {NodePatches} from './patches/Node.js';
 import {SlotablePatches} from './patches/Slotable.js';
 import {ParentNodePatches, ParentNodeDocumentOrFragmentPatches} from './patches/ParentNode.js';
-import {ElementPatches} from './patches/Element.js';
+import {ElementPatches, ElementShadowPatches} from './patches/Element.js';
 import {ElementOrShadowRootPatches} from './patches/ElementOrShadowRoot.js';
 import {HTMLElementPatches} from './patches/HTMLElement.js';
 import {SlotPatches} from './patches/Slot.js';
@@ -71,16 +71,66 @@ const getPatchPrototype = (name) => window[name] && window[name].prototype;
 // CustomElements polyfill *only* cares about these accessors.
 const disallowedNativePatches = utils.settings.hasDescriptors ? null : ['innerHTML', 'textContent'];
 
+/**
+ * Patch a group of accessors on an object only if it exists or if the `force`
+ * argument is true.
+ * @param {!Object} proto
+ * @param {!Array<Object>} list
+ * @param {string=} prefix
+ * @param {Array=} disallowed
+ */
+function applyPatchList(proto, list, prefix, disallowed) {
+  list.forEach(patch => proto && patch &&
+    utils.patchProperties(proto, patch, prefix, disallowed));
+}
+
 /** @param {string=} prefix */
 export const applyPatches = (prefix) => {
   const disallowed = prefix ? null : disallowedNativePatches;
   for (let p in patchMap) {
     const proto = getPatchPrototype(p);
-    patchMap[p].forEach(patch => proto && patch &&
-        utils.patchProperties(proto, patch, prefix, disallowed));
+    applyPatchList(proto, patchMap[p], prefix, disallowed);
   }
 }
 
+const PROTO_IS_PATCHED = utils.SHADY_PREFIX + 'patchedProto';
+
+const patchedProtos = new Map();
+const TextPatchedProto = Object.create(Text.prototype);
+TextPatchedProto[PROTO_IS_PATCHED] = true;
+applyPatchList(TextPatchedProto, patchMap.EventTarget);
+applyPatchList(TextPatchedProto, patchMap.Node);
+applyPatchList(TextPatchedProto, patchMap.Text);
+patchedProtos.set(Text.prototype, TextPatchedProto);
+
+export const patchElementProto = (proto) => {
+  proto[PROTO_IS_PATCHED] = true;
+  applyPatchList(proto, patchMap.EventTarget);
+  applyPatchList(proto, patchMap.Node);
+  applyPatchList(proto, patchMap.Element);
+  applyPatchList(proto, patchMap.HTMLElement);
+  applyPatchList(proto, patchMap.HTMLSlotElement);
+  return proto;
+}
+
+export const patchNodeProto = (node) => {
+  if (node[PROTO_IS_PATCHED] || utils.isShadyRoot(node)) {
+    return;
+  }
+  const nativeProto = Object.getPrototypeOf(node);
+  let proto = patchedProtos.get(nativeProto);
+  if (!proto) {
+    proto = Object.create(nativeProto);
+    patchElementProto(proto);
+    patchedProtos.set(nativeProto, proto);
+  }
+  Object.setPrototypeOf(node, proto);
+}
+
+export const patchShadowOnElement = () => {
+  utils.patchProperties(Element.prototype, ElementShadowPatches);
+}
+
 export const addShadyPrefixedProperties = () => {
   // perform shady patches
   applyPatches(utils.SHADY_PREFIX);

packages/shadydom/src/patches/Element.js

@@ -77,15 +77,6 @@ export const ElementPatches = utils.getOwnPropertyDescriptors({
     this[utils.SHADY_PREFIX + 'setAttribute']('slot', value);
   },
 
-  // Note: Can be patched on element prototype on all browsers.
-  // Must be patched on instance on browsers that support native Shadow DOM
-  // but do not have builtin accessors (old Chrome).
-  /** @this {Element} */
-  get shadowRoot() {
-    const nodeData = shadyDataForNode(this);
-    return nodeData && nodeData.publicRoot || null;
-  },
-
   /** @this {Element} */
   get className() {
     return this.getAttribute('class') || '';
@@ -127,14 +118,33 @@ export const ElementPatches = utils.getOwnPropertyDescriptors({
       // ensure that "class" attribute is fully removed if ShadyCSS does not keep scoping
       this[utils.NATIVE_PREFIX + 'removeAttribute'](attr);
     }
-  },
+  }
+
+});
 
+export const ElementShadowPatches = utils.getOwnPropertyDescriptors({
   /**
    * @this {Element}
    * @param {!{mode: string}} options
    */
   attachShadow(options) {
-    return attachShadow(this, options);
-  }
+    const root = attachShadow(this, options);
+    // TODO(sorvell): Workaround for CE not seeing shadowRoot in augmented
+    // noPatch mode. CE's attachShadow patch is overwritten by this patch
+    // and cannot set its own special tracking for shadowRoot. It does this
+    // to be able to see closed shadowRoots.
+    this['__CE_shadowRoot'] = root;
+    return root;
+  },
 
+  // Note: Can be patched on element prototype on all browsers.
+  // Must be patched on instance on browsers that support native Shadow DOM
+  // but do not have builtin accessors (old Chrome).
+  /** @this {Element} */
+  get shadowRoot() {
+    const nodeData = shadyDataForNode(this);
+    return nodeData && nodeData.publicRoot || null;
+  },
 });
+
+Object.assign(ElementPatches, ElementShadowPatches);

packages/shadydom/src/patches/HTMLElement.js

@@ -28,25 +28,29 @@ export const HTMLElementPatches = utils.getOwnPropertyDescriptors({
 
 });
 
-eventPropertyNames.forEach(property => {
-  HTMLElementPatches[property] = {
-    /** @this {HTMLElement} */
-    set: function(fn) {
-      const shadyData = ensureShadyDataForNode(this);
-      const eventName = property.substring(2);
-      if (!shadyData.__onCallbackListeners) {
-        shadyData.__onCallbackListeners = {};
-      }
-      shadyData.__onCallbackListeners[property] && this.removeEventListener(eventName, shadyData.__onCallbackListeners[property]);
-      this[utils.SHADY_PREFIX + 'addEventListener'](eventName, fn);
-      shadyData.__onCallbackListeners[property] = fn;
-    },
-    /** @this {HTMLElement} */
-    get() {
-      const shadyData = shadyDataForNode(this);
-      return shadyData && shadyData.__onCallbackListeners && shadyData.__onCallbackListeners[property];
-    },
-    configurable: true
-  };
-});
+if (!utils.settings.preferPerformance) {
+
+  eventPropertyNames.forEach(property => {
+    HTMLElementPatches[property] = {
+      /** @this {HTMLElement} */
+      set: function(fn) {
+        const shadyData = ensureShadyDataForNode(this);
+        const eventName = property.substring(2);
+        if (!shadyData.__onCallbackListeners) {
+          shadyData.__onCallbackListeners = {};
+        }
+        shadyData.__onCallbackListeners[property] && this.removeEventListener(eventName, shadyData.__onCallbackListeners[property]);
+        this[utils.SHADY_PREFIX + 'addEventListener'](eventName, fn);
+        shadyData.__onCallbackListeners[property] = fn;
+      },
+      /** @this {HTMLElement} */
+      get() {
+        const shadyData = shadyDataForNode(this);
+        return shadyData && shadyData.__onCallbackListeners && shadyData.__onCallbackListeners[property];
+      },
+      configurable: true
+    };
+  });
+
+}
 

packages/shadydom/src/patches/Node.js

@@ -80,7 +80,9 @@ function scheduleObserver(node, addedNode, removedNode) {
   if (observer) {
     if (addedNode) {
       if (addedNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-        observer.addedNodes.push(...addedNode.childNodes);
+        for (let i = 0, l = addedNode.childNodes.length; i < l; i++) {
+          observer.addedNodes.push(addedNode.childNodes[i]);
+        }
       } else {
         observer.addedNodes.push(addedNode);
       }

packages/shadydom/src/shadydom.js

@@ -26,11 +26,17 @@ import {patchInsideElementAccessors, patchOutsideElementAccessors} from './patch
 import {patchEvents, patchClick, composedPath} from './patch-events.js';
 import {ShadyRoot} from './attach-shadow.js';
 import {wrap, Wrapper} from './wrapper.js';
-import {addShadyPrefixedProperties, applyPatches} from './patch-prototypes.js';
+import {addShadyPrefixedProperties, applyPatches, patchShadowOnElement, patchElementProto} from './patch-prototypes.js';
 
 
 if (utils.settings.inUse) {
 
+  const patch = utils.settings.hasDescriptors ? n => n : (node) => {
+    patchInsideElementAccessors(node);
+    patchOutsideElementAccessors(node);
+    return node;
+  };
+
   let ShadyDOM = {
     // TODO(sorvell): remove when Polymer does not depend on this.
     'inUse': utils.settings.inUse,
@@ -41,11 +47,7 @@ if (utils.settings.inUse) {
     // (2) does not have special (slot) children itself
     // (3) and setting the property needs to provoke distribution (because
     // a nested slot is added/removed)
-    'patch': (node) => {
-      patchInsideElementAccessors(node);
-      patchOutsideElementAccessors(node);
-      return node;
-    },
+    'patch': patch,
     'isShadyRoot': utils.isShadyRoot,
     'enqueue': enqueue,
     'flush': flush,
@@ -74,7 +76,20 @@ if (utils.settings.inUse) {
     // Integration point with ShadyCSS to disable styling MutationObserver,
     // as ShadyDOM will now handle dynamic scoping.
     'handlesDynamicScoping': true,
-    'wrap': utils.settings.noPatch ? wrap : (n) => n,
+    // Ensure the node is wrapped. This should be used when `noPatch` is set
+    // to ensure Shadow DOM compatible DOM operation.
+    'wrap': utils.settings.noPatch ? wrap : patch,
+    // When code should be compatible with `noPatch` `true` and `on-demand`
+    // settings, `wrapIfNeeded` can be used for optimal performance (v. `wrap`)
+    // for all DOM operations except the following: `appendChild` and
+    // `insertBefore` (when the node is being moved from a location where it
+    // was logically positioned in the DOM); when setting `className`/`class`;
+    // when calling `querySelector|All`; when setting `textContent` or
+    // `innerHTML`; `addEventListener`; and all scope specific API's like
+    // `getRootNode`, `isConnected`, `slot`, `assignedSlot`, `assignedNodes`.
+    'wrapIfNeeded': utils.settings.noPatch === true ||
+      (utils.settings.noPatch === 'on-demand' && !utils.settings.hasDescriptors) ?
+      wrap : patch,
     'Wrapper': Wrapper,
     'composedPath': composedPath,
     // Set to true to avoid patching regular platform property names. When set,
@@ -83,8 +98,10 @@ if (utils.settings.inUse) {
     // This setting provides a small performance boost, but requires all DOM API
     // access that requires Shadow DOM behavior to be proxied via `ShadyDOM.wrap`.
     'noPatch': utils.settings.noPatch,
+    'patchOnDemand': utils.settings.patchOnDemand,
     'nativeMethods': nativeMethods,
-    'nativeTree': nativeTree
+    'nativeTree': nativeTree,
+    'patchElementProto': patchElementProto
   };
 
   window['ShadyDOM'] = ShadyDOM;
@@ -121,6 +138,9 @@ if (utils.settings.inUse) {
     applyPatches();
     // Patch click event behavior only if we're patching
     patchClick()
+  } else if (utils.settings.patchOnDemand) {
+    // in noPatch, do patch `attachShadow` and `shadowRoot`
+    patchShadowOnElement();
   }
 
   // For simplicity, patch events unconditionally.

packages/shadydom/src/utils.js

@@ -19,8 +19,9 @@ const desc = Object.getOwnPropertyDescriptor(Node.prototype, 'firstChild');
 /* eslint-disable */
 settings.hasDescriptors = Boolean(desc && desc.configurable && desc.get);
 settings.inUse = settings['force'] || !settings.hasNativeShadowDOM;
-settings.noPatch = settings['noPatch'] || false;
+settings.noPatch = /** @type {string|boolean} */(settings['noPatch'] || false);
 settings.preferPerformance = settings['preferPerformance'];
+settings.patchOnDemand = (settings.noPatch === 'on-demand') && settings.hasDescriptors;
 /* eslint-enable */
 
 const IS_IE = navigator.userAgent.match('Trident');