Update to match 2.x branch

Author: Steven Orvell

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 = Polymer.wrap(this).parentNode;
+    if (!parent || (parent.nodeType == Node.DOCUMENT_FRAGMENT_NODE &&
+        !Polymer.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,12 +254,12 @@ 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;
+        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) {
           for (let i=0, n; (i<c$.length) && (n=c$[i]); i++) {
-            parent.removeChild(n);
+            wrap(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,7 +324,7 @@ 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 parent = wrap(this).parentNode;
       for (let i=0; i<this.__instances.length; i++) {
         this.__attachInstance(i, parent);
       }
@@ -585,14 +586,14 @@ export class DomRepeat extends domRepeatBase {
     let inst = this.__instances[idx];
     for (let i=0; i<inst.children.length; i++) {
       let el = inst.children[i];
-      inst.root.appendChild(el);
+      wrap(inst.root).appendChild(el);
     }
     return inst;
   }
 
   __attachInstance(idx, parent) {
     let inst = this.__instances[idx];
-    parent.insertBefore(inst.root, this);
+    wrap(parent).insertBefore(inst.root, this);
   }
 
   __detachAndRemoveInstance(idx) {
@@ -625,7 +626,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

@@ -20,11 +20,10 @@ 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;
 
-let wrap = (n) => n;
-
 /**
  * Element class mixin that provides Polymer's "legacy" API intended to be
  * backward-compatible to the greatest extent possible with the API
@@ -988,22 +987,6 @@ export const LegacyElementMixin = dedupingMixin((base) => {
 
   }
 
-  if (window.ShadyDOM && window.ShadyDOM.inUse && window.ShadyDOM.noPatch) {
-    wrap = ShadyDOM.wrap;
-
-    LegacyElement.prototype._attachDom = function(dom) {
-      const w = this.__wrapper = ShadyDOM.wrap(this);
-      if (dom) {
-        if (!w.shadowRoot) {
-          w.attachShadow({mode: 'open'});
-        }
-        w.shadowRoot.appendChild(dom);
-        return w.shadowRoot;
-      }
-      return null;
-    };
-  }
-
   LegacyElement.prototype.is = '';
 
   return LegacyElement;

lib/legacy/polymer.dom.js

@@ -379,10 +379,12 @@ DomApi.prototype.innerHTML;
 
 
 if (window.ShadyDOM && window.ShadyDOM.inUse && window.ShadyDOM.noPatch) {
+
   class Wrapper extends ShadyDOM.Wrapper {
+
     observeNodes(callback) {
       return new FlattenedNodesObserver(
-          /** @type {!HTMLElement} */(this.node), callback, dom);
+          /** @type {!HTMLElement} */(this.node), callback);
     }
 
     unobserveNodes(observerHandle) {
@@ -433,7 +435,7 @@ if (window.ShadyDOM && window.ShadyDOM.inUse && window.ShadyDOM.noPatch) {
 
     getEffectiveChildNodes() {
       return FlattenedNodesObserver.getFlattenedNodes(
-          /** @type {!HTMLElement} */ (this), dom);
+          /** @type {!HTMLElement} */ (this));
     }
 
     queryDistributedElements(selector) {
@@ -448,10 +450,6 @@ if (window.ShadyDOM && window.ShadyDOM.inUse && window.ShadyDOM.noPatch) {
       return list;
     }
 
-    get activeElement() {
-      let node = this.node;
-      return node._activeElement !== undefined ? node._activeElement : node.activeElement;
-    }
   }
 
   DomApi = Wrapper;
@@ -508,10 +506,10 @@ if (window.ShadyDOM && window.ShadyDOM.inUse && window.ShadyDOM.noPatch) {
  * @return {!DomApi|!EventApi} Wrapper providing either node API or event API
  */
 export const dom = function(obj) {
+  obj = obj || document;
   if (obj instanceof DomApi || obj instanceof EventApi) {
     return obj;
   }
-  obj = obj || document;
   if (!obj['__domApi']) {
     let helper;
     if (obj instanceof Event) {

lib/mixins/element-mixin.js

@@ -16,6 +16,7 @@ import { pathFromUrl, resolveCss, resolveUrl } from '../utils/resolve-url.js';
 import { DomModule } from '../elements/dom-module.js';
 import { PropertyEffects } from './property-effects.js';
 import { PropertiesMixin } from './properties-mixin.js';
+import { wrap } from '../utils/wrap.js';
 
 /**
  * Current Polymer version in Semver notation.
@@ -651,13 +652,14 @@ export const ElementMixin = dedupingMixin(base => {
      * @return {ShadowRoot} node to which the dom has been attached.
      */
     _attachDom(dom) {
-      if (this.attachShadow) {
+      const n = wrap(this);
+      if (n.attachShadow) {
         if (dom) {
-          if (!this.shadowRoot) {
-            this.attachShadow({mode: 'open'});
+          if (!n.shadowRoot) {
+            n.attachShadow({mode: 'open'});
           }
-          this.shadowRoot.appendChild(dom);
-          return this.shadowRoot;
+          n.shadowRoot.appendChild(dom);
+          return n.shadowRoot;
         }
         return null;
       } else {

lib/utils/flattened-nodes-observer.js

@@ -11,6 +11,7 @@ import './boot.js';
 
 import { calculateSplices } from './array-splice.js';
 import { microTask } from './async.js';
+import { wrap } from './wrap.js';
 
 /**
  * Returns true if `node` is a slot element
@@ -81,16 +82,16 @@ export let FlattenedNodesObserver = class {
    * @nocollapse See https://github.com/google/closure-compiler/issues/2763
    */
   // eslint-disable-next-line
-  static getFlattenedNodes(node, wrapper = n => n) {
-    const wrapped = wrapper(node);
+  static getFlattenedNodes(node) {
+    const wrapped = wrap(node);
     if (isSlot(node)) {
       node = /** @type {!HTMLSlotElement} */(node); // eslint-disable-line no-self-assign
       return wrapped.assignedNodes({flatten: true});
     } else {
       return Array.from(wrapped.childNodes).map((node) => {
         if (isSlot(node)) {
           node = /** @type {!HTMLSlotElement} */(node); // eslint-disable-line no-self-assign
-          return wrapper(node).assignedNodes({flatten: true});
+          return wrap(node).assignedNodes({flatten: true});
         } else {
           return [node];
         }
@@ -104,12 +105,11 @@ export let FlattenedNodesObserver = class {
    * or removals from the target's list of flattened nodes.
    */
   // eslint-disable-next-line
-  constructor(target, callback, wrapper = n=> n) {
+  constructor(target, callback) {
     /**
      * @type {MutationObserver}
      * @private
      */
-    this._wrap = wrapper;
     this._shadyChildrenObserver = null;
     /**
      * @type {MutationObserver}
@@ -147,9 +147,9 @@ export let FlattenedNodesObserver = class {
   connect() {
     if (isSlot(this._target)) {
       this._listenSlots([this._target]);
-    } else if (this._wrap(this._target).children) {
+    } else if (wrap(this._target).children) {
       this._listenSlots(
-          /** @type {!NodeList<!Node>} */ (this._wrap(this._target).children));
+          /** @type {!NodeList<!Node>} */ (wrap(this._target).children));
       if (window.ShadyDOM) {
         this._shadyChildrenObserver =
           ShadyDOM.observeChildren(this._target, (mutations) => {
@@ -178,9 +178,9 @@ export let FlattenedNodesObserver = class {
   disconnect() {
     if (isSlot(this._target)) {
       this._unlistenSlots([this._target]);
-    } else if (this._wrap(this._target).children) {
+    } else if (wrap(this._target).children) {
       this._unlistenSlots(
-          /** @type {!NodeList<!Node>} */ (this._wrap(this._target).children));
+          /** @type {!NodeList<!Node>} */ (wrap(this._target).children));
       if (window.ShadyDOM && this._shadyChildrenObserver) {
         ShadyDOM.unobserveChildren(this._shadyChildrenObserver);
         this._shadyChildrenObserver = null;

lib/utils/templatize.js

@@ -49,7 +49,8 @@ import './boot.js';
 
 import { PropertyEffects } from '../mixins/property-effects.js';
 import { MutableData } from '../mixins/mutable-data.js';
-import { strictTemplatePolicy } from '../utils/settings.js';
+import { strictTemplatePolicy } from '../settings.js';
+import { wrap } from '../wrap.js';
 
 // Base class for HTMLTemplateElement extension that has property effects
 // machinery for propagating host properties to children. This is an ES5
@@ -115,6 +116,7 @@ class TemplateInstanceBase extends base {
     this.root = this._stampTemplate(this.__dataHost);
     // Save list of stamped children
     let children = this.children = [];
+    // TODO(sorvell): probably ok not to use `wrap` here.
     for (let n = this.root.firstChild; n; n=n.nextSibling) {
       children.push(n);
       n.__templatizeInstance = this;
@@ -219,11 +221,11 @@ class TemplateInstanceBase extends base {
         } else if (n.localName === 'slot') {
           if (hide) {
             n.__polymerReplaced__ = document.createComment('hidden-slot');
-            n.parentNode.replaceChild(n.__polymerReplaced__, n);
+            wrap(wrap(n).parentNode).replaceChild(n.__polymerReplaced__, n);
           } else {
             const replace = n.__polymerReplaced__;
             if (replace) {
-              replace.parentNode.replaceChild(n, replace);
+              wrap(wrap(replace).parentNode).replaceChild(n, replace);
             }
           }
         }
@@ -580,7 +582,7 @@ export function modelForElement(template, node) {
     } else {
       // Still in a template scope, keep going up until
       // a __templatizeInstance is found
-      node = node.parentNode;
+      node = wrap(node).parentNode;
     }
   }
   return null;

lib/utils/wrap.js

@@ -0,0 +1,19 @@
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+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
+*/
+
+// Node wrapper to ensure ShadowDOM safe operation regardless of polyfill
+// presence or mode. Note that with the introduction of `ShadyDOM.noPatch`,
+// a node wrapper must be used to access ShadowDOM API.
+// This is similar to using `Polymer.dom` but relies exclusively
+// on the presence of the ShadyDOM polyfill rather than requiring the loading
+// of legacy (Polymer.dom) API.
+export const wrap = (window.ShadyDOM && window.ShadyDOM.noPatch) ?
+    window.ShadyDOM.wrap : (n) => n;
+

test/runner.html

@@ -70,6 +70,7 @@
       'unit/dom-bind.html',
       'unit/array-selector.html',
       'unit/polymer-dom.html',
+      'unit/polymer-dom-nopatch.html',
       'unit/polymer-dom-observeNodes.html',
       'unit/flattened-nodes-observer.html',
       // TODO: substitute for equivalent es6 import tests