Updating Shadow DOM and including some fixes to enable it to work with CustomElements.

pkg/shadow_dom/lib/shadow_dom.debug.js

-if ((!HTMLElement.prototype.createShadowRoot &&
-    !HTMLElement.prototype.webkitCreateShadowRoot) ||
-    window.__forceShadowDomPolyfill) {
+if (!HTMLElement.prototype.createShadowRoot
+    || window.__forceShadowDomPolyfill) {
 
 /*
  * Copyright 2013 The Polymer Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
 (function() {
   // TODO(jmesserly): fix dart:html to use unprefixed name
   if (Element.prototype.webkitCreateShadowRoot) {
     Element.prototype.webkitCreateShadowRoot = function() {
@@ skipping 704 matching lines @@
       this.path.setValueFrom(this.object, newValue);
     }
   });
 
   function CompoundPathObserver(callback, target, token, valueFn) {
     Observer.call(this, undefined, callback, target, token);
     this.valueFn = valueFn;
 
     this.observed = [];
     this.values = [];
+    this.value = undefined;
+    this.oldValue = undefined;
+    this.oldValues = undefined;
+    this.changeFlags = undefined;
     this.started = false;
   }
 
   CompoundPathObserver.prototype = createObject({
     __proto__: PathObserver.prototype,
 
     addPath: function(object, path) {
       if (this.started)
         throw Error('Cannot add more paths once started.');
 
@@ skipping 15 matching lines @@
 
       var anyChanged = false;
       for (var i = 0; i < this.observed.length; i = i+2) {
         var path = this.observed[i+1];
         if (!path)
           continue;
         var object = this.observed[i];
         var value = path.getValueFrom(object, this.observedSet);
         var oldValue = this.values[i/2];
         if (!areSameValue(value, oldValue)) {
+          if (!anyChanged && !this.valueFn) {
+            this.oldValues = this.oldValues || [];
+            this.changeFlags = this.changeFlags || [];
+            for (var j = 0; j < this.values.length; j++) {
+              this.oldValues[j] = this.values[j];
+              this.changeFlags[j] = false;
+            }
+          }
+
+          if (!this.valueFn)
+            this.changeFlags[i/2] = true;
+
           this.values[i/2] = value;
           anyChanged = true;
         }
       }
 
       if (this.observedSet)
         this.observedSet.cleanup();
 
       return anyChanged;
     },
 
     check: function() {
       if (!this.getValues())
         return;
 
-      this.value = this.valueFn(this.values);
+      if (this.valueFn) {
+        this.value = this.valueFn(this.values);
 
-      if (areSameValue(this.value, this.oldValue))
-        return false;
+        if (areSameValue(this.value, this.oldValue))
+          return false;
 
-      this.reportArgs = [this.value, this.oldValue];
+        this.reportArgs = [this.value, this.oldValue];
+      } else {
+        this.reportArgs = [this.values, this.oldValues, this.changeFlags];
+      }
+
       return true;
     },
 
     sync: function(hard) {
       if (hard) {
         this.getValues();
-        this.value = this.valueFn(this.values);
+        if (this.valueFn)
+          this.value = this.valueFn(this.values);
       }
 
-      this.oldValue = this.value;
+      if (this.valueFn)
+        this.oldValue = this.value;
     },
 
     close: function() {
       if (this.observed) {
         for (var i = 0; i < this.observed.length; i = i + 2) {
           var object = this.observed[i];
           if (object && typeof object.close === 'function')
             object.close();
         }
         this.observed = undefined;
@@ skipping 2083 matching lines @@
       nodesWereAdded(nodes);
 
       return oldChildWrapper;
     },
 
     /**
      * Called after a node was added. Subclasses override this to invalidate
      * the renderer as needed.
      * @private
      */
-    nodeWasAdded_: function() {},
+    nodeWasAdded_: function() {
+      for (var child = this.firstChild; child; child = child.nextSibling) {
+        child.nodeWasAdded_();
+      }
+    },
 
     hasChildNodes: function() {
       return this.firstChild === null;
     },
 
     /** @type {Node} */
     get parentNode() {
       // If the parentNode has not been overridden, use the original parentNode.
       return this.parentNode_ !== undefined ?
           this.parentNode_ : wrap(this.impl.parentNode);
@@ skipping 302 matching lines @@
   var GetElementsByInterface = scope.GetElementsByInterface;
   var Node = scope.wrappers.Node;
   var ParentNodeInterface = scope.ParentNodeInterface;
   var SelectorsInterface = scope.SelectorsInterface;
   var addWrapNodeListMethod = scope.addWrapNodeListMethod;
   var mixin = scope.mixin;
   var oneOf = scope.oneOf;
   var registerWrapper = scope.registerWrapper;
   var wrappers = scope.wrappers;
 
-  var shadowRootTable = new WeakMap();
   var OriginalElement = window.Element;
 
-
   var matchesName = oneOf(OriginalElement.prototype, [
     'matches',
     'mozMatchesSelector',
     'msMatchesSelector',
     'webkitMatchesSelector',
   ]);
 
   var originalMatches = OriginalElement.prototype[matchesName];
 
   function invalidateRendererBasedOnAttribute(element, name) {
     // Only invalidate if parent node is a shadow host.
     var p = element.parentNode;
     if (!p || !p.shadowRoot)
       return;
 
     var renderer = scope.getRendererForHost(p);
     if (renderer.dependsOnAttribute(name))
       renderer.invalidate();
   }
 
   function Element(node) {
     Node.call(this, node);
   }
   Element.prototype = Object.create(Node.prototype);
   mixin(Element.prototype, {
     createShadowRoot: function() {
       var newShadowRoot = new wrappers.ShadowRoot(this);
-      shadowRootTable.set(this, newShadowRoot);
+      this.impl.polymerShadowRoot_ = newShadowRoot;
 
       var renderer = scope.getRendererForHost(this);
       renderer.invalidate();
 
       return newShadowRoot;
     },
 
     get shadowRoot() {
-      return shadowRootTable.get(this) || null;
+      return this.impl.polymerShadowRoot_ || null;
     },
 
     setAttribute: function(name, value) {
       this.impl.setAttribute(name, value);
       invalidateRendererBasedOnAttribute(this, name);
     },
 
     removeAttribute: function(name) {
       this.impl.removeAttribute(name);
       invalidateRendererBasedOnAttribute(this, name);
@@ skipping 594 matching lines @@
     if (parentNodeWrapper.firstChild === nodeWrapper)
       parentNodeWrapper.firstChild_ = nodeWrapper;
 
     parentNode.removeChild(node);
   }
 
   var distributedChildNodesTable = new WeakMap();
   var eventParentsTable = new WeakMap();
   var insertionParentTable = new WeakMap();
   var rendererForHostTable = new WeakMap();
-  var shadowDOMRendererTable = new WeakMap();
 
   function distributeChildToInsertionPoint(child, insertionPoint) {
     getDistributedChildNodes(insertionPoint).push(child);
     assignToInsertionPoint(child, insertionPoint);
 
     var eventParents = eventParentsTable.get(child);
     if (!eventParents)
       eventParentsTable.set(child, eventParents = []);
     eventParents.push(insertionPoint);
   }
@@ skipping 432 matching lines @@
             assignToInsertionPoint(tree, point);  // 4.3.2.2.
             continue;  // 4.3.2.3.
           }
         } else {
           break;  // 4.4.
         }
       }
     },
 
     associateNode: function(node) {
-      shadowDOMRendererTable.set(node, this);
+      node.impl.polymerShadowRenderer_ = this;
     }
   };
 
   function isInsertionPoint(node) {
     // Should this include <shadow>?
     return node instanceof HTMLContentElement;
   }
 
   function isActiveInsertionPoint(node) {
     // <content> inside another <content> or <shadow> is considered inactive.
@@ skipping 38 matching lines @@
   // - a new shadow root is created
   // - a direct child to a content/shadow element is added or removed
   // - a sibling to a content/shadow element is added or removed
   // - content[select] is changed
   // - an attribute in a direct child to a host is modified
 
   /**
    * This gets called when a node was added or removed to it.
    */
   Node.prototype.invalidateShadowRenderer = function(force) {
-    var renderer = shadowDOMRendererTable.get(this);
+    var renderer = this.impl.polymerShadowRenderer_;
     if (renderer) {
       renderer.invalidate();
       return true;
     }
 
     return false;
   };
 
   HTMLContentElement.prototype.getDistributedNodes = function() {
-    var renderer = shadowDOMRendererTable.get(this);
-    if (renderer)
-      renderer.render();
+    // TODO(arv): We should only rerender the dirty ancestor renderers (from
+    // the root and down).
+    renderAllPending();
     return getDistributedChildNodes(this);
   };
 
   HTMLShadowElement.prototype.nodeWasAdded_ =
   HTMLContentElement.prototype.nodeWasAdded_ = function() {
     // Invalidate old renderer if any.
     this.invalidateShadowRenderer();
 
     var shadowRoot = getShadowRootAncestor(this);
     var renderer;
     if (shadowRoot)
       renderer = getRendererForShadowRoot(shadowRoot);
-    shadowDOMRendererTable.set(this, renderer);
+    this.impl.polymerShadowRenderer_ = renderer;
     if (renderer)
       renderer.invalidate();
   };
 
   scope.eventParentsTable = eventParentsTable;
   scope.getRendererForHost = getRendererForHost;
   scope.getShadowTrees = getShadowTrees;
   scope.insertionParentTable = insertionParentTable;
   scope.renderAllPending = renderAllPending;
 
@@ skipping 705 matching lines @@
 
   // TODO(jmesserly): we need to wrap document somehow (a dart:html hook?)
   window.dartExperimentalFixupGetTag = function(originalGetTag) {
     var NodeList = ShadowDOMPolyfill.wrappers.NodeList;
     var ShadowRoot = ShadowDOMPolyfill.wrappers.ShadowRoot;
     var unwrapIfNeeded = ShadowDOMPolyfill.unwrapIfNeeded;
     function getTag(obj) {
       // TODO(jmesserly): do we still need these?
       if (obj instanceof NodeList) return 'NodeList';
       if (obj instanceof ShadowRoot) return 'ShadowRoot';
-      if (obj instanceof MutationRecord) return 'MutationRecord';
-      if (obj instanceof MutationObserver) return 'MutationObserver';
+      if (window.MutationRecord && (obj instanceof MutationRecord))
+          return 'MutationRecord';
+      if (window.MutationObserver && (obj instanceof MutationObserver))
+          return 'MutationObserver';
 
       var unwrapped = unwrapIfNeeded(obj);
       if (obj !== unwrapped) {
         // Fix up class names for Firefox.
         // For some of them (like HTMLFormElement and HTMLInputElement),
         // the "constructor" property of the unwrapped nodes points at the
         // same constructor as the wrapper.
         var ctor = obj.constructor
         if (ctor === unwrapped.constructor) {
           var name = ctor._ShadowDOMPolyfill$cacheTag_;
@@ skipping 532 matching lines @@
       css.push(cssRules[i].cssText);
     }
     return css.join('\n\n');
   }
 
   // exports
   scope.ShadowCSS.shimShadowDOMStyling2 = shimShadowDOMStyling2;
 })(window.Platform);
 
 }