Changes to make compatible with noPatch version of ShadyDOM [3.x]

lib/elements/dom-bind.js

@@ -13,6 +13,7 @@ import { PropertyEffects } from '../mixins/property-effects.js';
 import { OptionalMutableData } from '../mixins/mutable-data.js';
 import { GestureEventListeners } from '../mixins/gesture-event-listeners.js';
 import { strictTemplatePolicy } from '../utils/settings.js';
+import { wrap } from '../utils/wrap.js';
 
 /**
  * @constructor
@@ -87,7 +88,7 @@ export class DomBind extends domBindBase {
   }
 
   __insertChildren() {
-    this.parentNode.insertBefore(this.root, this);
+    wrap(wrap(this).parentNode).insertBefore(this.root, this);
   }
 
   __removeChildren() {

lib/elements/dom-if.js

@@ -14,6 +14,7 @@ import { Debouncer } from '../utils/debounce.js';
 import { enqueueDebouncer, flush } from '../utils/flush.js';
 import { microTask } from '../utils/async.js';
 import { root } from '../utils/path.js';
+import { wrap } from '../utils/wrap.js';
 
 /**
  * The `<dom-if>` element will stamp a light-dom `<template>` child when
@@ -120,9 +121,9 @@ export class DomIf extends PolymerElement {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (!this.parentNode ||
-        (this.parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE &&
-         !this.parentNode.host)) {
+    const parent = wrap(this).parentNode;
+    if (!parent || (parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE &&
+        !wrap(parent).host)) {
       this.__teardownInstance();
     }
   }
@@ -174,15 +175,15 @@ export class DomIf extends PolymerElement {
   }
 
   __ensureInstance() {
-    let parentNode = this.parentNode;
+    let parentNode = wrap(this).parentNode;
     // Guard against element being detached while render was queued
     if (parentNode) {
       if (!this.__ctor) {
-        let template = /** @type {HTMLTemplateElement} */(this.querySelector('template'));
+        let template = /** @type {HTMLTemplateElement} */(wrap(this).querySelector('template'));
         if (!template) {
           // Wait until childList changes and template should be there by then
           let observer = new MutationObserver(() => {
-            if (this.querySelector('template')) {
+            if (wrap(this).querySelector('template')) {
               observer.disconnect();
               this.__render();
             } else {
@@ -219,16 +220,16 @@ export class DomIf extends PolymerElement {
       }
       if (!this.__instance) {
         this.__instance = new this.__ctor();
-        parentNode.insertBefore(this.__instance.root, this);
+        wrap(parentNode).insertBefore(this.__instance.root, this);
       } else {
         this.__syncHostProperties();
         let c$ = this.__instance.children;
         if (c$ && c$.length) {
           // Detect case where dom-if was re-attached in new position
-          let lastChild = this.previousSibling;
+          let lastChild = wrap(this).previousSibling;
           if (lastChild !== c$[c$.length-1]) {
             for (let i=0, n; (i<c$.length) && (n=c$[i]); i++) {
-              parentNode.insertBefore(n, this);
+              wrap(parentNode).insertBefore(n, this);
             }
           }
         }
@@ -253,10 +254,11 @@ export class DomIf extends PolymerElement {
       let c$ = this.__instance.children;
       if (c$ && c$.length) {
         // use first child parent, for case when dom-if may have been detached
-        let parent = c$[0].parentNode;
-          // Instance children may be disconnected from parents when dom-if
-          // detaches if a tree was innerHTML'ed
-          if (parent) {
+        let parent = wrap(c$[0]).parentNode;
+        // Instance children may be disconnected from parents when dom-if
+        // detaches if a tree was innerHTML'ed
+        if (parent) {
+          parent = wrap(parent);
           for (let i=0, n; (i<c$.length) && (n=c$[i]); i++) {
             parent.removeChild(n);
           }

lib/elements/dom-repeat.js

@@ -15,6 +15,7 @@ import { enqueueDebouncer, flush } from '../utils/flush.js';
 import { OptionalMutableData } from '../mixins/mutable-data.js';
 import { matches, translate } from '../utils/path.js';
 import { timeOut, microTask } from '../utils/async.js';
+import { wrap } from '../utils/wrap.js';
 
 /**
  * @constructor
@@ -323,9 +324,9 @@ export class DomRepeat extends domRepeatBase {
     // only perform attachment if the element was previously detached.
     if (this.__isDetached) {
       this.__isDetached = false;
-      let parent = this.parentNode;
+      let wrappedParent = wrap(wrap(this).parentNode);
       for (let i=0; i<this.__instances.length; i++) {
-        this.__attachInstance(i, parent);
+        this.__attachInstance(i, wrappedParent);
       }
     }
   }
@@ -583,15 +584,17 @@ export class DomRepeat extends domRepeatBase {
 
   __detachInstance(idx) {
     let inst = this.__instances[idx];
+    const wrappedRoot = wrap(inst.root);
     for (let i=0; i<inst.children.length; i++) {
       let el = inst.children[i];
-      inst.root.appendChild(el);
+      wrappedRoot.appendChild(el);
     }
     return inst;
   }
 
   __attachInstance(idx, parent) {
     let inst = this.__instances[idx];
+    // Note, this is pre-wrapped as an optimization
     parent.insertBefore(inst.root, this);
   }
 
@@ -625,7 +628,7 @@ export class DomRepeat extends domRepeatBase {
     }
     let beforeRow = this.__instances[instIdx + 1];
     let beforeNode = beforeRow ? beforeRow.children[0] : this;
-    this.parentNode.insertBefore(inst.root, beforeNode);
+    wrap(wrap(this).parentNode).insertBefore(inst.root, beforeNode);
     this.__instances[instIdx] = inst;
     return inst;
   }

lib/legacy/legacy-element-mixin.js

@@ -8,7 +8,6 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 import '@webcomponents/shadycss/entrypoints/apply-shim.js';
-
 import { ElementMixin } from '../mixins/element-mixin.js';
 import { GestureEventListeners } from '../mixins/gesture-event-listeners.js';
 import { DirMixin } from '../mixins/dir-mixin.js';
@@ -20,6 +19,7 @@ import { setTouchAction } from '../utils/gestures.js';
 import { Debouncer } from '../utils/debounce.js';
 import { timeOut, microTask } from '../utils/async.js';
 import { get } from '../utils/path.js';
+import { wrap } from '../utils/wrap.js';
 
 let styleInterface = window.ShadyCSS;
 
@@ -419,7 +419,7 @@ export const LegacyElementMixin = dedupingMixin((base) => {
       });
       event.detail = detail;
       let node = options.node || this;
-      node.dispatchEvent(event);
+      wrap(node).dispatchEvent(event);
       return event;
     }
 
@@ -506,6 +506,7 @@ export const LegacyElementMixin = dedupingMixin((base) => {
      * @override
      */
     $$(slctr) {
+      // Note, no need to `wrap` this because root is always patched
       return this.root.querySelector(slctr);
     }
 
@@ -516,7 +517,7 @@ export const LegacyElementMixin = dedupingMixin((base) => {
      * @this {Element}
      */
     get domHost() {
-      let root = this.getRootNode();
+      let root = wrap(this).getRootNode();
       return (root instanceof DocumentFragment) ? /** @type {ShadowRoot} */ (root).host : root;
     }
 
@@ -528,7 +529,9 @@ export const LegacyElementMixin = dedupingMixin((base) => {
      * @override
      */
     distributeContent() {
-      if (window.ShadyDOM && this.shadowRoot) {
+      const thisEl = /** @type {Element} */ (this);
+      const domApi = /** @type {DomApi} */(dom(thisEl));
+      if (window.ShadyDOM && domApi.shadowRoot) {
         ShadyDOM.flush();
       }
     }
@@ -638,6 +641,7 @@ export const LegacyElementMixin = dedupingMixin((base) => {
      * @override
      */
     getContentChildNodes(slctr) {
+      // Note, no need to `wrap` this because root is always
       let content = this.root.querySelector(slctr || 'slot');
       return content ?
           /** @type {PolymerDomApi} */ (dom(content)).getDistributedNodes() :
@@ -678,8 +682,8 @@ export const LegacyElementMixin = dedupingMixin((base) => {
      */
     isLightDescendant(node) {
       const thisNode = /** @type {Node} */ (this);
-      return thisNode !== node && thisNode.contains(node) &&
-        thisNode.getRootNode() === node.getRootNode();
+      return thisNode !== node && wrap(thisNode).contains(node) &&
+        wrap(thisNode).getRootNode() === wrap(node).getRootNode();
     }
 
     /**
@@ -690,7 +694,7 @@ export const LegacyElementMixin = dedupingMixin((base) => {
      * @override
      */
     isLocalDescendant(node) {
-      return this.root === node.getRootNode();
+      return this.root === wrap(node).getRootNode();
     }
 
     /**
@@ -883,10 +887,10 @@ export const LegacyElementMixin = dedupingMixin((base) => {
         bool = !node.hasAttribute(name);
       }
       if (bool) {
-        node.setAttribute(name, '');
+        wrap(node).setAttribute(name, '');
         return true;
       } else {
-        node.removeAttribute(name);
+        wrap(node).removeAttribute(name);
         return false;
       }
     }