update shadowdom polyfill to latest

pkg/shadow_dom/lib/shadow_dom.debug.js

 if ((!HTMLElement.prototype.createShadowRoot &&
     !HTMLElement.prototype.webkitCreateShadowRoot) ||
     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() {
@@ skipping 13 matching lines @@
 
 // SideTable is a weak map where possible. If WeakMap is not available the
 // association is stored as an expando property.
 var SideTable;
 // TODO(arv): WeakMap does not allow for Node etc to be keys in Firefox
 if (typeof WeakMap !== 'undefined' && navigator.userAgent.indexOf('Firefox/') < 0) {
   SideTable = WeakMap;
 } else {
   (function() {
     var defineProperty = Object.defineProperty;
-    var hasOwnProperty = Object.hasOwnProperty;
-    var counter = new Date().getTime() % 1e9;
+    var counter = Date.now() % 1e9;
 
     SideTable = function() {
       this.name = '__st' + (Math.random() * 1e9 >>> 0) + (counter++ + '__');
     };
 
     SideTable.prototype = {
       set: function(key, value) {
-        defineProperty(key, this.name, {value: value, writable: true});
+        var entry = key[this.name];
+        if (entry && entry[0] === key)
+          entry[1] = value;
+        else
+          defineProperty(key, this.name, {value: [key, value], writable: true});
       },
       get: function(key) {
-        return hasOwnProperty.call(key, this.name) ? key[this.name] : undefined;
+        var entry;
+        return (entry = key[this.name]) && entry[0] === key ?
+            entry[1] : undefined;
       },
       delete: function(key) {
         this.set(key, undefined);
       }
     }
   })();
 }
 
 // Copyright 2012 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
 // license that can be found in the LICENSE file.
 
 var ShadowDOMPolyfill = {};
 
 (function(scope) {
   'use strict';
 
   var wrapperTable = new SideTable();
   var constructorTable = new SideTable();
+  var nativePrototypeTable = new SideTable();
   var wrappers = Object.create(null);
 
   function assert(b) {
     if (!b)
       throw new Error('Assertion failed');
   };
 
   function mixin(to, from) {
     Object.getOwnPropertyNames(from).forEach(function(name) {
       Object.defineProperty(to, name,
@@ skipping 12 matching lines @@
         case 'prototype':
         case 'toString':
           return;
       }
       Object.defineProperty(to, name,
                             Object.getOwnPropertyDescriptor(from, name));
     });
     return to;
   };
 
+  function oneOf(object, propertyNames) {
+    for (var i = 0; i < propertyNames.length; i++) {
+      if (propertyNames[i] in object)
+        return propertyNames[i];
+    }
+  }
+
   // Mozilla's old DOM bindings are bretty busted:
   // https://bugzilla.mozilla.org/show_bug.cgi?id=855844
   // Make sure they are create before we start modifying things.
   Object.getOwnPropertyNames(window);
 
   function getWrapperConstructor(node) {
     var nativePrototype = node.__proto__ || Object.getPrototypeOf(node);
     var wrapperConstructor = constructorTable.get(nativePrototype);
     if (wrapperConstructor)
       return wrapperConstructor;
@@ skipping 18 matching lines @@
 
   // This is used as a fallback when getting the descriptor fails in
   // installProperty.
   var dummyDescriptor = {
     get: function() {},
     set: function(v) {},
     configurable: true,
     enumerable: true
   };
 
+  function isEventHandlerName(name) {
+    return /^on[a-z]+$/.test(name);
+  }
+
   function installProperty(source, target, allowMethod) {
     Object.getOwnPropertyNames(source).forEach(function(name) {
       if (name in target)
         return;
 
       if (isFirefox) {
         // Tickle Firefox's old bindings.
         source.__lookupGetter__(name);
       }
       var descriptor;
       try {
         descriptor = Object.getOwnPropertyDescriptor(source, name);
       } catch (ex) {
-        // JSC and V8 both use data properties instead accessors which can cause
-        // getting the property desciptor throw an exception.
+        // JSC and V8 both use data properties instead of accessors which can
+        // cause getting the property desciptor to throw an exception.
         // https://bugs.webkit.org/show_bug.cgi?id=49739
         descriptor = dummyDescriptor;
       }
       var getter, setter;
       if (allowMethod && typeof descriptor.value === 'function') {
         target[name] = function() {
           return this.impl[name].apply(this.impl, arguments);
         };
         return;
       }
 
-      getter = function() {
-        return this.impl[name];
-      };
-
-      if (descriptor.writable || descriptor.set) {
-        setter = function(value) {
-          this.impl[name] = value;
+      var isEvent = isEventHandlerName(name);
+      if (isEvent) {
+        getter = scope.getEventHandlerGetter(name);
+      } else {
+        getter = function() {
+          return this.impl[name];
         };
       }
 
+      if (descriptor.writable || descriptor.set) {
+        if (isEvent) {
+          setter = scope.getEventHandlerSetter(name);
+        } else {
+          setter = function(value) {
+            this.impl[name] = value;
+          };
+        }
+      }
+
       Object.defineProperty(target, name, {
         get: getter,
         set: setter,
         configurable: descriptor.configurable,
         enumerable: descriptor.enumerable
       });
     });
   }
 
   /**
    * @param {Function} nativeConstructor
    * @param {Function} wrapperConstructor
-   * @param {string|Object=} opt_instance If present, this is used to extract
-   *     properties from an instance object. If this is a string
-   *     |document.createElement| is used to create an instance.
+   * @param {Object=} opt_instance If present, this is used to extract
+   *     properties from an instance object.
    */
   function register(nativeConstructor, wrapperConstructor, opt_instance) {
     var nativePrototype = nativeConstructor.prototype;
     registerInternal(nativePrototype, wrapperConstructor, opt_instance);
     mixinStatics(wrapperConstructor, nativeConstructor);
   }
 
   function registerInternal(nativePrototype, wrapperConstructor, opt_instance) {
     var wrapperPrototype = wrapperConstructor.prototype;
     assert(constructorTable.get(nativePrototype) === undefined);
+
     constructorTable.set(nativePrototype, wrapperConstructor);
+    nativePrototypeTable.set(wrapperPrototype, nativePrototype);
+
     addForwardingProperties(nativePrototype, wrapperPrototype);
     if (opt_instance)
       registerInstanceProperties(wrapperPrototype, opt_instance);
   }
 
   function isWrapperFor(wrapperConstructor, nativeConstructor) {
     return constructorTable.get(nativeConstructor.prototype) ===
         wrapperConstructor;
   }
 
@@ skipping 17 matching lines @@
     return GeneratedWrapper;
   }
 
   function createWrapperConstructor(superWrapperConstructor) {
     function GeneratedWrapper(node) {
       superWrapperConstructor.call(this, node);
     }
     GeneratedWrapper.prototype =
         Object.create(superWrapperConstructor.prototype);
     GeneratedWrapper.prototype.constructor = GeneratedWrapper;
-    // We add this property to work around a Firefox bug where HTMLFormElement
-    // and HTMLInputElements sometimes have their constructor incorrectly
-    // attached to GeneratedWrapper. See lib/patches-shadowdom-polyfill.js
-    GeneratedWrapper._ShadowDOMPolyfill$isGeneratedWrapper = true;
 
     return GeneratedWrapper;
   }
 
   var OriginalDOMImplementation = DOMImplementation;
   var OriginalEvent = Event;
   var OriginalNode = Node;
   var OriginalWindow = Window;
+  var OriginalRange = Range;
 
   function isWrapper(object) {
     return object instanceof wrappers.EventTarget ||
            object instanceof wrappers.Event ||
+           object instanceof wrappers.Range ||
            object instanceof wrappers.DOMImplementation;
   }
 
   function isNative(object) {
     return object instanceof OriginalNode ||
            object instanceof OriginalEvent ||
            object instanceof OriginalWindow ||
+           object instanceof OriginalRange ||
            object instanceof OriginalDOMImplementation;
   }
 
   /**
    * Wraps a node in a WrapperNode. If there already exists a wrapper for the
    * |node| that wrapper is returned instead.
    * @param {Node} node
    * @return {WrapperNode}
    */
   function wrap(impl) {
     if (impl === null)
       return null;
 
     assert(isNative(impl));
     var wrapper = wrapperTable.get(impl);
-    if (!wrapper) {
-      var wrapperConstructor = getWrapperConstructor(impl);
-      wrapper = new wrapperConstructor(impl);
-      wrapperTable.set(impl, wrapper);
-    }
+    if (!wrapper)
+      wrapperTable.set(impl, wrapper = new (getWrapperConstructor(impl))(impl));
     return wrapper;
   }
 
   /**
    * Unwraps a wrapper and returns the node it is wrapping.
    * @param {WrapperNode} wrapper
    * @return {Node}
    */
   function unwrap(wrapper) {
     if (wrapper === null)
@@ skipping 52 matching lines @@
    * Forwards existing methods on the native object to the wrapper methods.
    * This does not wrap any of the arguments or the return value since the
    * wrapper implementation already takes care of that.
    * @param {Array.<Function>} constructors
    * @parem {Array.<string>} names
    */
   function forwardMethodsToWrapper(constructors, names) {
     constructors.forEach(function(constructor) {
       names.forEach(function(name) {
         constructor.prototype[name] = function() {
-          var w = wrap(this);
+          var w = wrapIfNeeded(this);
           return w[name].apply(w, arguments);
         };
       });
     });
   }
 
   scope.assert = assert;
+  scope.constructorTable = constructorTable;
   scope.defineGetter = defineGetter;
   scope.defineWrapGetter = defineWrapGetter;
   scope.forwardMethodsToWrapper = forwardMethodsToWrapper;
-  scope.isWrapper = isWrapper;
   scope.isWrapperFor = isWrapperFor;
   scope.mixin = mixin;
+  scope.nativePrototypeTable = nativePrototypeTable;
+  scope.oneOf = oneOf;
   scope.registerObject = registerObject;
   scope.registerWrapper = register;
   scope.rewrap = rewrap;
   scope.unwrap = unwrap;
   scope.unwrapIfNeeded = unwrapIfNeeded;
   scope.wrap = wrap;
   scope.wrapIfNeeded = wrapIfNeeded;
   scope.wrappers = wrappers;
 
 })(this.ShadowDOMPolyfill);
-
 // Copyright 2013 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
 // license that can be found in the LICENSE file.
 
 (function(scope) {
   'use strict';
 
   var forwardMethodsToWrapper = scope.forwardMethodsToWrapper;
   var mixin = scope.mixin;
   var registerWrapper = scope.registerWrapper;
   var unwrap = scope.unwrap;
   var wrap = scope.wrap;
   var wrappers = scope.wrappers;
 
   var wrappedFuns = new SideTable();
   var listenersTable = new SideTable();
   var handledEventsTable = new SideTable();
   var targetTable = new SideTable();
   var currentTargetTable = new SideTable();
   var relatedTargetTable = new SideTable();
   var eventPhaseTable = new SideTable();
   var stopPropagationTable = new SideTable();
   var stopImmediatePropagationTable = new SideTable();
+  var eventHandlersTable = new SideTable();
+  var eventPathTable = new SideTable();
 
   function isShadowRoot(node) {
     return node instanceof wrappers.ShadowRoot;
   }
 
   function isInsertionPoint(node) {
     var localName = node.localName;
     return localName === 'content' || localName === 'shadow';
   }
 
   function isShadowHost(node) {
     return !!node.shadowRoot;
   }
 
   function getEventParent(node) {
     var dv;
     return node.parentNode || (dv = node.defaultView) && wrap(dv) || null;
   }
 
   // https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#dfn-adjusted-parent
   function calculateParents(node, context, ancestors) {
     if (ancestors.length)
       return ancestors.shift();
 
     // 1.
     if (isShadowRoot(node))
-      return node.insertionParent || scope.getHostForShadowRoot(node);
+      return getInsertionParent(node) || scope.getHostForShadowRoot(node);
 
     // 2.
     var eventParents = scope.eventParentsTable.get(node);
     if (eventParents) {
       // Copy over the remaining event parents for next iteration.
       for (var i = 1; i < eventParents.length; i++) {
         ancestors[i - 1] = eventParents[i];
       }
       return eventParents[0];
     }
 
     // 3.
     if (context && isInsertionPoint(node)) {
       var parentNode = node.parentNode;
       if (parentNode && isShadowHost(parentNode)) {
         var trees = scope.getShadowTrees(parentNode);
-        var p = context.insertionParent;
+        var p = getInsertionParent(context);
         for (var i = 0; i < trees.length; i++) {
           if (trees[i].contains(p))
             return p;
         }
       }
     }
 
     return getEventParent(node);
   }
 
@@ skipping 64 matching lines @@
         last = ancestor;  // 3.4.6.
         ancestor = calculateParents(ancestor, context, ancestors);  // 3.4.7.
       }
       if (isShadowRoot(target))  // 3.5.
         target = scope.getHostForShadowRoot(target);
       else
         target = target.parentNode;  // 3.6.
     }
   }
 
+  function getInsertionParent(node) {
+    return scope.insertionParentTable.get(node);
+  }
+
   function isDistributed(node) {
-    return node.insertionParent;
+    return getInsertionParent(node);
   }
 
   function rootOfNode(node) {
     var p;
     while (p = node.parentNode) {
       node = p;
     }
     return node;
   }
 
   function inSameTree(a, b) {
     return rootOfNode(a) === rootOfNode(b);
   }
 
+  function enclosedBy(a, b) {
+    if (a === b)
+      return true;
+    if (a instanceof wrappers.ShadowRoot) {
+      var host = scope.getHostForShadowRoot(a);
+      return enclosedBy(rootOfNode(host), b);
+    }
+    return false;
+

[Emily Fortuna, 2013/09/05 18:19:10]

remove extra line here?

[Jennifer Messerly, 2013/09/05 19:47:02]

I submitted a pull request for upstream:
https://github.com/Polymer/ShadowDOM/pull/241

+  }
+
   function isMutationEvent(type) {
     switch (type) {
       case 'DOMAttrModified':
       case 'DOMAttributeNameChanged':
       case 'DOMCharacterDataModified':
       case 'DOMElementNameChanged':
       case 'DOMNodeInserted':
       case 'DOMNodeInsertedIntoDocument':
       case 'DOMNodeRemoved':
       case 'DOMNodeRemovedFromDocument':
@@ skipping 21 matching lines @@
   }
 
   function dispatchEvent(event, originalWrapperTarget) {
     var eventPath = retarget(originalWrapperTarget);
 
     // For window load events the load event is dispatched at the window but
     // the target is set to the document.
     //
     // http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end
     //
-    // TODO(arv): Find a loess hacky way to do this.
+    // TODO(arv): Find a less hacky way to do this.
     if (event.type === 'load' &&
         eventPath.length === 2 &&
         eventPath[0].target instanceof wrappers.Document) {
       eventPath.shift();
     }
 
+    eventPathTable.set(event, eventPath);
+
     if (dispatchCapturing(event, eventPath)) {
       if (dispatchAtTarget(event, eventPath)) {
         dispatchBubbling(event, eventPath);
       }
     }
 
     eventPhaseTable.set(event, Event.NONE);
     currentTargetTable.set(event, null);
 
     return event.defaultPrevented;
@@ skipping 143 matching lines @@
   Event.prototype = {
     get target() {
       return targetTable.get(this);
     },
     get currentTarget() {
       return currentTargetTable.get(this);
     },
     get eventPhase() {
       return eventPhaseTable.get(this);
     },
+    get path() {
+      var nodeList = new wrappers.NodeList();
+      var eventPath = eventPathTable.get(this);
+      if (eventPath) {
+        var index = 0;
+        var lastIndex = eventPath.length - 1;
+        var baseRoot = rootOfNode(currentTargetTable.get(this));
+
+        for (var i = 0; i <= lastIndex; i++) {
+          var currentTarget = eventPath[i].currentTarget;
+          var currentRoot = rootOfNode(currentTarget);
+          if (enclosedBy(baseRoot, currentRoot) &&
+              // Make sure we do not add Window to the path.
+              (i !== lastIndex || currentTarget instanceof wrappers.Node)) {
+            nodeList[index++] = currentTarget;
+          }
+        }
+        nodeList.length = index;
+      }
+      return nodeList;
+    },
     stopPropagation: function() {
       stopPropagationTable.set(this, true);
     },
     stopImmediatePropagation: function() {
       stopPropagationTable.set(this, true);
       stopImmediatePropagationTable.set(this, true);
     }
   };
   registerWrapper(OriginalEvent, Event, document.createEvent('Event'));
 
   function unwrapOptions(options) {
     if (!options || !options.relatedTarget)
       return options;
     return Object.create(options, {
       relatedTarget: {value: unwrap(options.relatedTarget)}
     });
   }
 
   function registerGenericEvent(name, SuperEvent, prototype) {
     var OriginalEvent = window[name];
     var GenericEvent = function(type, options) {
       if (type instanceof OriginalEvent)
         this.impl = type;
       else
         return wrap(constructEvent(OriginalEvent, name, type, options));
     };
     GenericEvent.prototype = Object.create(SuperEvent.prototype);
     if (prototype)
       mixin(GenericEvent.prototype, prototype);
-    // Firefox does not support FocusEvent
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=855741
-    if (OriginalEvent)
-      registerWrapper(OriginalEvent, GenericEvent, document.createEvent(name));
+    if (OriginalEvent) {
+      // IE does not support event constructors but FocusEvent can only be
+      // created using new FocusEvent in Firefox.
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=882165
+      if (OriginalEvent.prototype['init' + name]) {
+        registerWrapper(OriginalEvent, GenericEvent,
+                        document.createEvent(name));
+      } else {
+        registerWrapper(OriginalEvent, GenericEvent, new OriginalEvent('temp'));
+      }
+    }
     return GenericEvent;
   }
 
   var UIEvent = registerGenericEvent('UIEvent', Event);
   var CustomEvent = registerGenericEvent('CustomEvent', Event);
 
   var relatedTargetProto = {
     get relatedTarget() {
       return relatedTargetTable.get(this) || wrap(unwrap(this).relatedTarget);
     }
@@ skipping 109 matching lines @@
   }
 
   // Node and Window have different internal type checks in WebKit so we cannot
   // use the same method as the original function.
   var methodNames = [
     'addEventListener',
     'removeEventListener',
     'dispatchEvent'
   ];
 
-  [Element, Window, Document].forEach(function(constructor) {
+  [Node, Window].forEach(function(constructor) {
     var p = constructor.prototype;
     methodNames.forEach(function(name) {
       Object.defineProperty(p, name + '_', {value: p[name]});
     });
   });
 
   function getTargetToListenAt(wrapper) {
     if (wrapper instanceof wrappers.ShadowRoot)
       wrapper = scope.getHostForShadowRoot(wrapper);
     return unwrap(wrapper);
@@ skipping 66 matching lines @@
     var element = wrap(originalElementFromPoint.call(document.impl, x, y));
     var targets = retarget(element, this)
     for (var i = 0; i < targets.length; i++) {
       var target = targets[i];
       if (target.currentTarget === self)
         return target.target;
     }
     return null;
   }
 
+  /**
+   * Returns a function that is to be used as a getter for `onfoo` properties.
+   * @param {string} name
+   * @return {Function}
+   */
+  function getEventHandlerGetter(name) {
+    return function() {
+      var inlineEventHandlers = eventHandlersTable.get(this);
+      return inlineEventHandlers && inlineEventHandlers[name] &&
+          inlineEventHandlers[name].value || null;
+     };
+  }
+
+  /**
+   * Returns a function that is to be used as a setter for `onfoo` properties.
+   * @param {string} name
+   * @return {Function}
+   */
+  function getEventHandlerSetter(name) {
+    var eventType = name.slice(2);
+    return function(value) {
+      var inlineEventHandlers = eventHandlersTable.get(this);
+      if (!inlineEventHandlers) {
+        inlineEventHandlers = Object.create(null);
+        eventHandlersTable.set(this, inlineEventHandlers);
+      }
+
+      var old = inlineEventHandlers[name];
+      if (old)
+        this.removeEventListener(eventType, old.wrapped, false);
+
+      if (typeof value === 'function') {
+        var wrapped = function(e) {
+          var rv = value.call(this, e);
+          if (rv === false)
+            e.preventDefault();
+          else if (name === 'onbeforeunload' && typeof rv === 'string')
+            e.returnValue = rv;
+          // mouseover uses true for preventDefault but preventDefault for
+          // mouseover is ignored by browsers these day.
+        };
+
+        this.addEventListener(eventType, wrapped, false);
+        inlineEventHandlers[name] = {
+          value: value,
+          wrapped: wrapped
+        };
+      }
+    };
+  }
+
   scope.adjustRelatedTarget = adjustRelatedTarget;
   scope.elementFromPoint = elementFromPoint;
+  scope.getEventHandlerGetter = getEventHandlerGetter;
+  scope.getEventHandlerSetter = getEventHandlerSetter;
   scope.wrapEventTargetMethods = wrapEventTargetMethods;
   scope.wrappers.CustomEvent = CustomEvent;
   scope.wrappers.Event = Event;
   scope.wrappers.EventTarget = EventTarget;
   scope.wrappers.FocusEvent = FocusEvent;
   scope.wrappers.MouseEvent = MouseEvent;
   scope.wrappers.MutationEvent = MutationEvent;
   scope.wrappers.UIEvent = UIEvent;
 
 })(this.ShadowDOMPolyfill);
@@ skipping 52 matching lines @@
   'use strict';
 
   var EventTarget = scope.wrappers.EventTarget;
   var NodeList = scope.wrappers.NodeList;
   var defineWrapGetter = scope.defineWrapGetter;
   var assert = scope.assert;
   var mixin = scope.mixin;
   var registerWrapper = scope.registerWrapper;
   var unwrap = scope.unwrap;
   var wrap = scope.wrap;
+  var wrapIfNeeded = scope.wrapIfNeeded;
 
   function assertIsNodeWrapper(node) {
     assert(node instanceof Node);
   }
 
   /**
    * Collects nodes from a DocumentFragment or a Node for removal followed
    * by an insertion.
    *
    * This updates the internal pointers for node, previousNode and nextNode.
@@ skipping 26 matching lines @@
     }
 
     if (previousNode)
       previousNode.nextSibling_ = nodes[0];
     if (nextNode)
       nextNode.previousSibling_ = nodes[nodes.length - 1];
 
     return nodes;
   }
 
-  function unwrapNodesForInsertion(nodes) {
-    if (nodes.length === 1)
+  function ensureSameOwnerDocument(parent, child) {
+    var ownerDoc = parent.nodeType === Node.DOCUMENT_NODE ?
+        parent : parent.ownerDocument;
+    if (ownerDoc !== child.ownerDocument)
+      ownerDoc.adoptNode(child);
+  }
+
+  function adoptNodesIfNeeded(owner, nodes) {
+    if (!nodes.length)
+      return;
+
+    var ownerDoc = owner.ownerDocument;
+
+    // All nodes have the same ownerDocument when we get here.
+    if (ownerDoc === nodes[0].ownerDocument)
+      return;
+
+    for (var i = 0; i < nodes.length; i++) {
+      scope.adoptNodeNoRemove(nodes[i], ownerDoc);
+    }
+  }
+
+  function unwrapNodesForInsertion(owner, nodes) {
+    adoptNodesIfNeeded(owner, nodes);
+    var length = nodes.length;
+
+    if (length === 1)
       return unwrap(nodes[0]);
 
-    var df = unwrap(document.createDocumentFragment());
-    for (var i = 0; i < nodes.length; i++) {
+    var df = unwrap(owner.ownerDocument.createDocumentFragment());
+    for (var i = 0; i < length; i++) {
       df.appendChild(unwrap(nodes[i]));
     }
     return df;
   }
 
   function removeAllChildNodes(wrapper) {
-    var childWrapper = wrapper.firstChild;
-    while (childWrapper) {
-      assert(childWrapper.parentNode === wrapper);
-      var nextSibling = childWrapper.nextSibling;
-      var childNode = unwrap(childWrapper);
-      var parentNode = childNode.parentNode;
-      if (parentNode)
-        originalRemoveChild.call(parentNode, childNode);
-      childWrapper.previousSibling_ = childWrapper.nextSibling_ = childWrapper.parentNode_ = null;
-      childWrapper = nextSibling;
+    if (wrapper.invalidateShadowRenderer()) {
+      var childWrapper = wrapper.firstChild;
+      while (childWrapper) {
+        assert(childWrapper.parentNode === wrapper);
+        var nextSibling = childWrapper.nextSibling;
+        var childNode = unwrap(childWrapper);
+        var parentNode = childNode.parentNode;
+        if (parentNode)
+          originalRemoveChild.call(parentNode, childNode);
+        childWrapper.previousSibling_ = childWrapper.nextSibling_ =
+            childWrapper.parentNode_ = null;
+        childWrapper = nextSibling;
+      }
+      wrapper.firstChild_ = wrapper.lastChild_ = null;
+    } else {
+      var node = unwrap(wrapper);
+      var child = node.firstChild;
+      var nextSibling;
+      while (child) {
+        nextSibling = child.nextSibling;
+        originalRemoveChild.call(node, child);
+        child = nextSibling;
+      }
     }
-    wrapper.firstChild_ = wrapper.lastChild_ = null;
+  }
+
+  function invalidateParent(node) {
+    var p = node.parentNode;
+    return p && p.invalidateShadowRenderer();
   }
 
   var OriginalNode = window.Node;
 
   /**
    * This represents a wrapper of a native DOM node.
    * @param {!Node} original The original DOM node, aka, the visual DOM node.
    * @constructor
    * @extends {EventTarget}
    */
@@ skipping 42 matching lines @@
   var originalReplaceChild = OriginalNode.prototype.replaceChild;
   var originalRemoveChild = OriginalNode.prototype.removeChild;
   var originalCompareDocumentPosition =
       OriginalNode.prototype.compareDocumentPosition;
 
   Node.prototype = Object.create(EventTarget.prototype);
   mixin(Node.prototype, {
     appendChild: function(childWrapper) {
       assertIsNodeWrapper(childWrapper);
 
-      this.invalidateShadowRenderer();
+      if (this.invalidateShadowRenderer() || invalidateParent(childWrapper)) {
+        var previousNode = this.lastChild;
+        var nextNode = null;
+        var nodes = collectNodes(childWrapper, this, previousNode, nextNode);
 
-      var previousNode = this.lastChild;
-      var nextNode = null;
-      var nodes = collectNodes(childWrapper, this,
-                               previousNode, nextNode);
+        this.lastChild_ = nodes[nodes.length - 1];
+        if (!previousNode)
+          this.firstChild_ = nodes[0];
 
-      this.lastChild_ = nodes[nodes.length - 1];
-      if (!previousNode)
-        this.firstChild_ = nodes[0];
+        originalAppendChild.call(this.impl, unwrapNodesForInsertion(this, nodes));
+      } else {
+        ensureSameOwnerDocument(this, childWrapper);
+        originalAppendChild.call(this.impl, unwrap(childWrapper));
+      }
 
-      // TODO(arv): It is unclear if we need to update the visual DOM here.
-      // A better aproach might be to make sure we only get here for nodes that
-      // are related to a shadow host and then invalidate that and re-render
-      // the host (on reflow?).
-      originalAppendChild.call(this.impl, unwrapNodesForInsertion(nodes));
+      childWrapper.nodeWasAdded_();
 
       return childWrapper;
     },
 
     insertBefore: function(childWrapper, refWrapper) {
       // TODO(arv): Unify with appendChild
       if (!refWrapper)
         return this.appendChild(childWrapper);
 
       assertIsNodeWrapper(childWrapper);
       assertIsNodeWrapper(refWrapper);
       assert(refWrapper.parentNode === this);
 
-      this.invalidateShadowRenderer();
+      if (this.invalidateShadowRenderer() || invalidateParent(childWrapper)) {
+        var previousNode = refWrapper.previousSibling;
+        var nextNode = refWrapper;
+        var nodes = collectNodes(childWrapper, this, previousNode, nextNode);
 
-      var previousNode = refWrapper.previousSibling;
-      var nextNode = refWrapper;
-      var nodes = collectNodes(childWrapper, this,
-                               previousNode, nextNode);
+        if (this.firstChild === refWrapper)
+          this.firstChild_ = nodes[0];
 
+        // insertBefore refWrapper no matter what the parent is?
+        var refNode = unwrap(refWrapper);
+        var parentNode = refNode.parentNode;
 
-      if (this.firstChild === refWrapper)
-        this.firstChild_ = nodes[0];
+        if (parentNode) {
+          originalInsertBefore.call(
+              parentNode,
+              unwrapNodesForInsertion(this, nodes),
+              refNode);
+        } else {
+          adoptNodesIfNeeded(this, nodes);
+        }
+      } else {
+        ensureSameOwnerDocument(this, childWrapper);
+        originalInsertBefore.call(this.impl, unwrap(childWrapper),
+                                  unwrap(refWrapper));
+      }
 
-      // insertBefore refWrapper no matter what the parent is?
-      var refNode = unwrap(refWrapper);
-      var parentNode = refNode.parentNode;
-      if (parentNode) {
-        originalInsertBefore.call(
-            parentNode,
-            unwrapNodesForInsertion(nodes),
-            refNode);
-      }
+      childWrapper.nodeWasAdded_();
 
       return childWrapper;
     },
 
     removeChild: function(childWrapper) {
       assertIsNodeWrapper(childWrapper);
       if (childWrapper.parentNode !== this) {
         // TODO(arv): DOMException
         throw new Error('NotFoundError');
       }
 
-      this.invalidateShadowRenderer();
+      var childNode = unwrap(childWrapper);
+      if (this.invalidateShadowRenderer()) {
 
-      // We need to remove the real node from the DOM before updating the
-      // pointers. This is so that that mutation event is dispatched before
-      // the pointers have changed.
-      var thisFirstChild = this.firstChild;
-      var thisLastChild = this.lastChild;
-      var childWrapperNextSibling = childWrapper.nextSibling;
-      var childWrapperPreviousSibling = childWrapper.previousSibling;
+        // We need to remove the real node from the DOM before updating the
+        // pointers. This is so that that mutation event is dispatched before
+        // the pointers have changed.
+        var thisFirstChild = this.firstChild;
+        var thisLastChild = this.lastChild;
+        var childWrapperNextSibling = childWrapper.nextSibling;
+        var childWrapperPreviousSibling = childWrapper.previousSibling;
 
-      var childNode = unwrap(childWrapper);
-      var parentNode = childNode.parentNode;
-      if (parentNode)
-        originalRemoveChild.call(parentNode, childNode);
+        var parentNode = childNode.parentNode;
+        if (parentNode)
+          originalRemoveChild.call(parentNode, childNode);
 
-      if (thisFirstChild === childWrapper)
-        this.firstChild_ = childWrapperNextSibling;
-      if (thisLastChild === childWrapper)
-        this.lastChild_ = childWrapperPreviousSibling;
-      if (childWrapperPreviousSibling)
-        childWrapperPreviousSibling.nextSibling_ = childWrapperNextSibling;
-      if (childWrapperNextSibling)
-        childWrapperNextSibling.previousSibling_ = childWrapperPreviousSibling;
+        if (thisFirstChild === childWrapper)
+          this.firstChild_ = childWrapperNextSibling;
+        if (thisLastChild === childWrapper)
+          this.lastChild_ = childWrapperPreviousSibling;
+        if (childWrapperPreviousSibling)
+          childWrapperPreviousSibling.nextSibling_ = childWrapperNextSibling;
+        if (childWrapperNextSibling) {
+          childWrapperNextSibling.previousSibling_ =
+              childWrapperPreviousSibling;
+        }
 
-      childWrapper.previousSibling_ = childWrapper.nextSibling_ = childWrapper.parentNode_ = null;
+        childWrapper.previousSibling_ = childWrapper.nextSibling_ =
+            childWrapper.parentNode_ = undefined;
+      } else {
+        originalRemoveChild.call(this.impl, childNode);
+      }
 
       return childWrapper;
     },
 
     replaceChild: function(newChildWrapper, oldChildWrapper) {
       assertIsNodeWrapper(newChildWrapper);
       assertIsNodeWrapper(oldChildWrapper);
 
       if (oldChildWrapper.parentNode !== this) {
         // TODO(arv): DOMException
         throw new Error('NotFoundError');
       }
 
-      this.invalidateShadowRenderer();
+      var oldChildNode = unwrap(oldChildWrapper);
 
-      var previousNode = oldChildWrapper.previousSibling;
-      var nextNode = oldChildWrapper.nextSibling;
-      if (nextNode === newChildWrapper)
-        nextNode = newChildWrapper.nextSibling;
-      var nodes = collectNodes(newChildWrapper, this,
-                               previousNode, nextNode);
+      if (this.invalidateShadowRenderer() ||
+          invalidateParent(newChildWrapper)) {
+        var previousNode = oldChildWrapper.previousSibling;
+        var nextNode = oldChildWrapper.nextSibling;
+        if (nextNode === newChildWrapper)
+          nextNode = newChildWrapper.nextSibling;
+        var nodes = collectNodes(newChildWrapper, this,
+                                 previousNode, nextNode);
 
-      if (this.firstChild === oldChildWrapper)
-        this.firstChild_ = nodes[0];
-      if (this.lastChild === oldChildWrapper)
-        this.lastChild_ = nodes[nodes.length - 1];
+        if (this.firstChild === oldChildWrapper)
+          this.firstChild_ = nodes[0];
+        if (this.lastChild === oldChildWrapper)
+          this.lastChild_ = nodes[nodes.length - 1];
 
-      oldChildWrapper.previousSibling_ = null;
-      oldChildWrapper.nextSibling_ = null;
-      oldChildWrapper.parentNode_ = null;
+        oldChildWrapper.previousSibling_ = oldChildWrapper.nextSibling_ =
+            oldChildWrapper.parentNode_ = undefined;
 
-      // replaceChild no matter what the parent is?
-      var oldChildNode = unwrap(oldChildWrapper);
-      if (oldChildNode.parentNode) {
-        originalReplaceChild.call(
-            oldChildNode.parentNode,
-            unwrapNodesForInsertion(nodes),
-            oldChildNode);
+        // replaceChild no matter what the parent is?
+        if (oldChildNode.parentNode) {
+          originalReplaceChild.call(
+              oldChildNode.parentNode,
+              unwrapNodesForInsertion(this, nodes),
+              oldChildNode);
+        }
+      } else {
+        ensureSameOwnerDocument(this, newChildWrapper);
+        originalReplaceChild.call(this.impl, unwrap(newChildWrapper),
+                                  oldChildNode);
       }
 
+      newChildWrapper.nodeWasAdded_();
+
       return oldChildWrapper;
     },
 
+    /**
+     * Called after a node was added. Subclasses override this to invalidate
+     * the renderer as needed.
+     * @private
+     */
+    nodeWasAdded_: function() {},
+
     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 33 matching lines @@
     get textContent() {
       // TODO(arv): This should fallback to this.impl.textContent if there
       // are no shadow trees below or above the context node.
       var s = '';
       for (var child = this.firstChild; child; child = child.nextSibling) {
         s += child.textContent;
       }
       return s;
     },
     set textContent(textContent) {
-      removeAllChildNodes(this);
-      this.invalidateShadowRenderer();
-      if (textContent !== '') {
-        var textNode = this.impl.ownerDocument.createTextNode(textContent);
-        this.appendChild(textNode);
+      if (this.invalidateShadowRenderer()) {
+        removeAllChildNodes(this);
+        if (textContent !== '') {
+          var textNode = this.impl.ownerDocument.createTextNode(textContent);
+          this.appendChild(textNode);
+        }
+      } else {
+        this.impl.textContent = textContent;
       }
     },
 
     get childNodes() {
       var wrapperList = new NodeList();
       var i = 0;
       for (var child = this.firstChild; child; child = child.nextSibling) {
         wrapperList[i++] = child;
       }
       wrapperList.length = i;
       return wrapperList;
     },
 
     cloneNode: function(deep) {
       if (!this.invalidateShadowRenderer())
         return wrap(this.impl.cloneNode(deep));
 
       var clone = wrap(this.impl.cloneNode(false));
       if (deep) {
         for (var child = this.firstChild; child; child = child.nextSibling) {
           clone.appendChild(child.cloneNode(true));
         }
       }
       // TODO(arv): Some HTML elements also clone other data like value.
       return clone;
     },
 
-    // insertionParent is added in ShadowRender.js
-
     contains: function(child) {
       if (!child)
         return false;
 
+      child = wrapIfNeeded(child);
+
       // TODO(arv): Optimize using ownerDocument etc.
       if (child === this)
         return true;
       var parentNode = child.parentNode;
       if (!parentNode)
         return false;
       return this.contains(parentNode);
     },
 
     compareDocumentPosition: function(otherNode) {
@@ skipping 154 matching lines @@
       return wrapperList;
     }
   };
 
   var ChildNodeInterface = {
     get nextElementSibling() {
       return forwardElement(this.nextSibling);
     },
 
     get previousElementSibling() {
-      return backwardsElement(this.nextSibling);
+      return backwardsElement(this.previousSibling);
     }
   };
 
   scope.ChildNodeInterface = ChildNodeInterface;
   scope.ParentNodeInterface = ParentNodeInterface;
 
 })(this.ShadowDOMPolyfill);
 
 // Copyright 2013 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
@@ skipping 37 matching lines @@
 (function(scope) {
   'use strict';
 
   var ChildNodeInterface = scope.ChildNodeInterface;
   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 SideTable();
   var OriginalElement = window.Element;
 
-  var originalMatches =
-      OriginalElement.prototype.matches ||
-      OriginalElement.prototype.mozMatchesSelector ||
-      OriginalElement.prototype.msMatchesSelector ||
-      OriginalElement.prototype.webkitMatchesSelector;
+
+  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);
 
-      scope.getRendererForHost(this);
-
-      this.invalidateShadowRenderer(true);
+      var renderer = scope.getRendererForHost(this);
+      renderer.invalidate();
 
       return newShadowRoot;
     },
 
     get shadowRoot() {
       return shadowRootTable.get(this) || null;
     },
 
     setAttribute: function(name, value) {
       this.impl.setAttribute(name, value);
-      // This is a bit agressive. We need to invalidate if it affects
-      // the rendering content[select] or if it effects the value of a content
-      // select.
-      this.invalidateShadowRenderer();
+      invalidateRendererBasedOnAttribute(this, name);
+    },
+
+    removeAttribute: function(name) {
+      this.impl.removeAttribute(name);
+      invalidateRendererBasedOnAttribute(this, name);
     },
 
     matches: function(selector) {
       return originalMatches.call(this.impl, selector);
     }
   });
 
+  Element.prototype[matchesName] = function(selector) {
+    return this.matches(selector);
+  };
+
+  if (OriginalElement.prototype.webkitCreateShadowRoot) {
+    Element.prototype.webkitCreateShadowRoot =
+        Element.prototype.createShadowRoot;
+  }
+
+  /**
+   * Useful for generating the accessor pair for a property that reflects an
+   * attribute.
+   */
+  function setterDirtiesAttribute(prototype, propertyName, opt_attrName) {
+    var attrName = opt_attrName || propertyName;
+    Object.defineProperty(prototype, propertyName, {
+      get: function() {
+        return this.impl[propertyName];
+      },
+      set: function(v) {
+        this.impl[propertyName] = v;
+        invalidateRendererBasedOnAttribute(this, attrName);
+      },
+      configurable: true,
+      enumerable: true
+    });
+  }
+
+  setterDirtiesAttribute(Element.prototype, 'id');
+  setterDirtiesAttribute(Element.prototype, 'className', 'class');
+
   mixin(Element.prototype, ChildNodeInterface);
   mixin(Element.prototype, GetElementsByInterface);
   mixin(Element.prototype, ParentNodeInterface);
   mixin(Element.prototype, SelectorsInterface);
 
   registerWrapper(OriginalElement, Element);
 
+  // TODO(arv): Export setterDirtiesAttribute and apply it to more bindings
+  // that reflect attributes.
+  scope.matchesName = matchesName;
   scope.wrappers.Element = Element;
 })(this.ShadowDOMPolyfill);
 
 // Copyright 2013 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
 // license that can be found in the LICENSE file.
 
 (function(scope) {
   'use strict';
 
@@ skipping 74 matching lines @@
     var s = '';
     for (var child = node.firstChild; child; child = child.nextSibling) {
       s += getOuterHTML(child);
     }
     return s;
   }
 
   function setInnerHTML(node, value, opt_tagName) {
     var tagName = opt_tagName || 'div';
     node.textContent = '';
-    var tempElement =unwrap(node.ownerDocument.createElement(tagName));
+    var tempElement = unwrap(node.ownerDocument.createElement(tagName));
     tempElement.innerHTML = value;
     var firstChild;
     while (firstChild = tempElement.firstChild) {
       node.appendChild(wrap(firstChild));
     }
   }
 
   var OriginalHTMLElement = window.HTMLElement;
 
   function HTMLElement(node) {
     Element.call(this, node);
   }
   HTMLElement.prototype = Object.create(Element.prototype);
   mixin(HTMLElement.prototype, {
     get innerHTML() {
       // TODO(arv): This should fallback to this.impl.innerHTML if there
       // are no shadow trees below or above the context node.
       return getInnerHTML(this);
     },
     set innerHTML(value) {
-      setInnerHTML(this, value, this.tagName);
+      if (this.invalidateShadowRenderer())
+        setInnerHTML(this, value, this.tagName);
+      else
+        this.impl.innerHTML = value;
     },
 
     get outerHTML() {
       // TODO(arv): This should fallback to HTMLElement_prototype.outerHTML if there
       // are no shadow trees below or above the context node.
       return getOuterHTML(this);
     },
     set outerHTML(value) {
-      if (!this.invalidateShadowRenderer()) {
+      var p = this.parentNode;
+      if (p) {
+        p.invalidateShadowRenderer();
         this.impl.outerHTML = value;
-      } else {
-        throw new Error('not implemented');
       }
     }
   });
 
   function getterRequiresRendering(name) {
     defineGetter(HTMLElement, name, function() {
       scope.renderAllPending();
       return this.impl[name];
      });
   }
@@ skipping 89 matching lines @@
   'use strict';
 
   var HTMLElement = scope.wrappers.HTMLElement;
   var mixin = scope.mixin;
   var registerWrapper = scope.registerWrapper;
 
   var OriginalHTMLShadowElement = window.HTMLShadowElement;
 
   function HTMLShadowElement(node) {
     HTMLElement.call(this, node);
-    this.olderShadowRoot_ = null;
   }
   HTMLShadowElement.prototype = Object.create(HTMLElement.prototype);
   mixin(HTMLShadowElement.prototype, {
-    get olderShadowRoot() {
-      return this.olderShadowRoot_;
-    },
-
-    invalidateShadowRenderer: function() {
-      HTMLElement.prototype.invalidateShadowRenderer.call(this, true);
-    },
-
     // TODO: attribute boolean resetStyleInheritance;
   });
 
   if (OriginalHTMLShadowElement)
     registerWrapper(OriginalHTMLShadowElement, HTMLShadowElement);
 
   scope.wrappers.HTMLShadowElement = HTMLShadowElement;
 })(this.ShadowDOMPolyfill);
+
 // Copyright 2013 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
 // license that can be found in the LICENSE file.
 
 (function(scope) {
   'use strict';
 
   var HTMLElement = scope.wrappers.HTMLElement;
   var getInnerHTML = scope.getInnerHTML;
   var mixin = scope.mixin;
   var registerWrapper = scope.registerWrapper;
   var setInnerHTML = scope.setInnerHTML;
+  var unwrap = scope.unwrap;
   var wrap = scope.wrap;
 
   var contentTable = new SideTable();
   var templateContentsOwnerTable = new SideTable();
 
   // http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html#dfn-template-contents-owner
   function getTemplateContentsOwner(doc) {
     if (!doc.defaultView)
       return doc;
     var d = templateContentsOwnerTable.get(doc);
     if (!d) {
       // TODO(arv): This should either be a Document or HTMLDocument depending
       // on doc.
       d = doc.implementation.createHTMLDocument('');
       while (d.lastChild) {
         d.removeChild(d.lastChild);
       }
       templateContentsOwnerTable.set(doc, d);
     }
     return d;
   }
 
   function extractContent(templateElement) {
+    // templateElement is not a wrapper here.
     var doc = getTemplateContentsOwner(templateElement.ownerDocument);
-    var df = doc.createDocumentFragment();
-    var nextSibling;
+    var df = unwrap(doc.createDocumentFragment());
     var child;
     while (child = templateElement.firstChild) {
       df.appendChild(child);
     }
     return df;
   }
 
   var OriginalHTMLTemplateElement = window.HTMLTemplateElement;
 
   function HTMLTemplateElement(node) {
     HTMLElement.call(this, node);
+    if (!OriginalHTMLTemplateElement) {
+      var content = extractContent(node);
+      contentTable.set(this, wrap(content));
+    }
   }
   HTMLTemplateElement.prototype = Object.create(HTMLElement.prototype);
 
   mixin(HTMLTemplateElement.prototype, {
     get content() {
       if (OriginalHTMLTemplateElement)
         return wrap(this.impl.content);
-
-      // TODO(arv): This should be done in createCallback. I initially tried to
-      // do this in the constructor but the wrapper is not yet created at that
-      // point in time so we hit an iloop.
-      var content = contentTable.get(this);
-      if (!content) {
-        content = extractContent(this);
-        contentTable.set(this, content);
-      }
-      return content;
+      return contentTable.get(this);
     },
 
     get innerHTML() {
       return getInnerHTML(this.content);
     },
     set innerHTML(value) {
       setInnerHTML(this.content, value);
-      this.invalidateShadowRenderer();
     }
 
     // TODO(arv): cloneNode needs to clone content.
 
   });
 
   if (OriginalHTMLTemplateElement)
     registerWrapper(OriginalHTMLTemplateElement, HTMLTemplateElement);
 
   scope.wrappers.HTMLTemplateElement = HTMLTemplateElement;
@@ skipping 65 matching lines @@
 
   var DocumentFragment = scope.wrappers.DocumentFragment;
   var elementFromPoint = scope.elementFromPoint;
   var getInnerHTML = scope.getInnerHTML;
   var mixin = scope.mixin;
   var rewrap = scope.rewrap;
   var setInnerHTML = scope.setInnerHTML;
   var unwrap = scope.unwrap;
 
   var shadowHostTable = new SideTable();
+  var nextOlderShadowTreeTable = new SideTable();
 
   function ShadowRoot(hostWrapper) {
     var node = unwrap(hostWrapper.impl.ownerDocument.createDocumentFragment());
     DocumentFragment.call(this, node);
 
     // createDocumentFragment associates the node with a wrapper
     // DocumentFragment instance. Override that.
     rewrap(node, this);
 
     var oldShadowRoot = hostWrapper.shadowRoot;
-    scope.nextOlderShadowTreeTable.set(this, oldShadowRoot);
+    nextOlderShadowTreeTable.set(this, oldShadowRoot);
 
     shadowHostTable.set(this, hostWrapper);
   }
   ShadowRoot.prototype = Object.create(DocumentFragment.prototype);
   mixin(ShadowRoot.prototype, {
     get innerHTML() {
       return getInnerHTML(this);
     },
     set innerHTML(value) {
       setInnerHTML(this, value);
       this.invalidateShadowRenderer();
     },
 
+    get olderShadowRoot() {
+      return nextOlderShadowTreeTable.get(this) || null;
+    },
+
     invalidateShadowRenderer: function() {
       return shadowHostTable.get(this).invalidateShadowRenderer();
     },
 
     elementFromPoint: function(x, y) {
       return elementFromPoint(this, this.ownerDocument, x, y);
     },
 
     getElementById: function(id) {
       return this.querySelector('#' + id);
     }
   });
 
   scope.wrappers.ShadowRoot = ShadowRoot;
   scope.getHostForShadowRoot = function(node) {
     return shadowHostTable.get(node);
   };
 })(this.ShadowDOMPolyfill);
 // 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(scope) {
   'use strict';
 
   var HTMLContentElement = scope.wrappers.HTMLContentElement;
+  var HTMLShadowElement = scope.wrappers.HTMLShadowElement;
   var Node = scope.wrappers.Node;
+  var ShadowRoot = scope.wrappers.ShadowRoot;
   var assert = scope.assert;
+  var getHostForShadowRoot = scope.getHostForShadowRoot;
   var mixin = scope.mixin;
+  var oneOf = scope.oneOf;
   var unwrap = scope.unwrap;
   var wrap = scope.wrap;
 
   /**
    * Updates the fields of a wrapper to a snapshot of the logical DOM as needed.
    * Up means parentNode
    * Sideways means previous and next sibling.
    * @param {!Node} wrapper
    */
   function updateWrapperUpAndSideways(wrapper) {
@@ skipping 22 matching lines @@
     updateWrapperDown(parentNodeWrapper);
   }
 
   // This object groups DOM operations. This is supposed to be the DOM as the
   // browser/render tree sees it.
   // When changes are done to the visual DOM the logical DOM needs to be updated
   // to reflect the correct tree.
   function removeAllChildNodes(parentNodeWrapper) {
     var parentNode = unwrap(parentNodeWrapper);
     updateAllChildNodes(parentNodeWrapper);
-    parentNode.textContent = '';
+    if (parentNode.firstChild)
+      parentNode.textContent = '';
   }
 
   function appendChild(parentNodeWrapper, childWrapper) {
     var parentNode = unwrap(parentNodeWrapper);
     var child = unwrap(childWrapper);
     if (child.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
       updateAllChildNodes(childWrapper);
 
     } else {
       remove(childWrapper);
@@ skipping 34 matching lines @@
   function remove(nodeWrapper) {
     var node = unwrap(nodeWrapper)
     var parentNode = node.parentNode;
     if (parentNode)
       removeChild(wrap(parentNode), nodeWrapper);
   }
 
   var distributedChildNodesTable = new SideTable();
   var eventParentsTable = new SideTable();
   var insertionParentTable = new SideTable();
-  var nextOlderShadowTreeTable = new SideTable();
   var rendererForHostTable = new SideTable();
   var shadowDOMRendererTable = new SideTable();
 
   var reprCounter = 0;
 
   function repr(node) {
     if (!node.displayName)
       node.displayName = node.nodeName + '-' + ++reprCounter;
     return node.displayName;
   }
 
   function distributeChildToInsertionPoint(child, insertionPoint) {
     getDistributedChildNodes(insertionPoint).push(child);
-    insertionParentTable.set(child, insertionPoint);
+    assignToInsertionPoint(child, insertionPoint);
 
     var eventParents = eventParentsTable.get(child);
     if (!eventParents)
       eventParentsTable.set(child, eventParents = []);
     eventParents.push(insertionPoint);
   }
 
   function resetDistributedChildNodes(insertionPoint) {
     distributedChildNodesTable.set(insertionPoint, []);
   }
@@ skipping 24 matching lines @@
       var node = nodes[i];
       if (predicate(node)) {
         if (visitor(node) === false)
           return;
       } else {
         visit(node, predicate, visitor);
       }
     }
   }
 
-  // http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#dfn-distribution-algorithm
-  function distribute(tree, pool) {
-    var anyRemoved = false;
-
-    visit(tree, isActiveInsertionPoint,
-        function(insertionPoint) {
-          resetDistributedChildNodes(insertionPoint);
-          for (var i = 0; i < pool.length; i++) {  // 1.2
-            var node = pool[i];  // 1.2.1
-            if (node === undefined)  // removed
-              continue;
-            if (matchesCriteria(node, insertionPoint)) {  // 1.2.2
-              distributeChildToInsertionPoint(node, insertionPoint);  // 1.2.2.1
-              pool[i] = undefined;  // 1.2.2.2
-              anyRemoved = true;
-            }
-          }
-        });
-
-    if (!anyRemoved)
-      return pool;
-
-    return pool.filter(function(item) {
-      return item !== undefined;
-    });
-  }
-
   // Matching Insertion Points
   // http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#matching-insertion-points
 
   // TODO(arv): Verify this... I don't remember why I picked this regexp.
   var selectorMatchRegExp = /^[*.:#[a-zA-Z_|]/;
 
   var allowedPseudoRegExp = new RegExp('^:(' + [
     'link',
     'visited',
     'target',
     'enabled',
     'disabled',
     'checked',
     'indeterminate',
     'nth-child',
     'nth-last-child',
     'nth-of-type',
     'nth-last-of-type',
     'first-child',
     'last-child',
     'first-of-type',
     'last-of-type',
     'only-of-type',
   ].join('|') + ')');
 
 
-  function oneOf(object, propertyNames) {
-    for (var i = 0; i < propertyNames.length; i++) {
-      if (propertyNames[i] in object)
-        return propertyNames[i];
-    }
-  }
-
   /**
    * @param {Element} node
    * @oaram {Element} point The insertion point element.
    * @return {boolean} Whether the node matches the insertion point.
    */
   function matchesCriteria(node, point) {
     var select = point.getAttribute('select');
     if (!select)
       return true;
 
@@ skipping 34 matching lines @@
     renderTimer = null;
     pendingDirtyRenderers.forEach(function(owner) {
       owner.render();
     });
     pendingDirtyRenderers = [];
   }
 
   function ShadowRenderer(host) {
     this.host = host;
     this.dirty = false;
+    this.invalidateAttributes();
     this.associateNode(host);
   }
 
+  /**
+   * Returns existing shadow renderer for a host or creates it if it is needed.
+   * @params {!Element} host
+   * @return {!ShadowRenderer}
+   */
   function getRendererForHost(host) {
     var renderer = rendererForHostTable.get(host);
     if (!renderer) {
       renderer = new ShadowRenderer(host);
       rendererForHostTable.set(host, renderer);
     }
     return renderer;
   }
 
+  function getShadowRootAncestor(node) {
+    for (; node; node = node.parentNode) {
+      if (node instanceof ShadowRoot)
+        return node;
+    }
+    return null;
+  }
+
+  function getRendererForShadowRoot(shadowRoot) {
+    return getRendererForHost(getHostForShadowRoot(shadowRoot));
+  }
+
   ShadowRenderer.prototype = {
+
     // http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#rendering-shadow-trees
     render: function() {
       if (!this.dirty)
         return;
 
+      this.invalidateAttributes();
+      this.treeComposition();
+
       var host = this.host;
-      this.treeComposition();
       var shadowDOM = host.shadowRoot;
-      if (!shadowDOM)
-        return;
 
       this.removeAllChildNodes(this.host);
 
       var shadowDOMChildNodes = getChildNodesSnapshot(shadowDOM);
       shadowDOMChildNodes.forEach(function(node) {
         this.renderNode(host, shadowDOM, node, false);
       }, this);
 
       this.dirty = false;
     },
@@ skipping 16 matching lines @@
         renderer.render();
       } else if (isInsertionPoint(node)) {
         this.renderInsertionPoint(visualParent, tree, node, isNested);
       } else if (isShadowInsertionPoint(node)) {
         this.renderShadowInsertionPoint(visualParent, tree, node);
       } else {
         this.renderAsAnyDomTree(visualParent, tree, node, isNested);
       }
     },
 
-    renderAsAnyDomTree: function(visualParent, tree, child, isNested) {
-      this.appendChild(visualParent, child);
+    renderAsAnyDomTree: function(visualParent, tree, node, isNested) {
+      this.appendChild(visualParent, node);
 
-      if (isShadowHost(child)) {
-        render(child);
+      if (isShadowHost(node)) {
+        render(node);
       } else {
-        var parent = child;
+        var parent = node;
         var logicalChildNodes = getChildNodesSnapshot(parent);
+        // We associate the parent of a content/shadow with the renderer
+        // because we may need to remove stale childNodes.
+        if (shadowDOMRendererTable.get(parent))
+          this.removeAllChildNodes(parent);
         logicalChildNodes.forEach(function(node) {
           this.renderNode(parent, tree, node, isNested);
         }, this);
       }
     },
 
     renderInsertionPoint: function(visualParent, tree, insertionPoint, isNested) {
       var distributedChildNodes = getDistributedChildNodes(insertionPoint);
       if (distributedChildNodes.length) {
         this.removeAllChildNodes(insertionPoint);
 
         distributedChildNodes.forEach(function(child) {
           if (isInsertionPoint(child) && isNested)
             this.renderInsertionPoint(visualParent, tree, child, isNested);
           else
             this.renderAsAnyDomTree(visualParent, tree, child, isNested);
         }, this);
       } else {
         this.renderFallbackContent(visualParent, insertionPoint);
       }
       this.remove(insertionPoint);
     },
 
     renderShadowInsertionPoint: function(visualParent, tree, shadowInsertionPoint) {
-      var nextOlderTree = getNextOlderTree(tree);
+      var nextOlderTree = tree.olderShadowRoot;
       if (nextOlderTree) {
-        // This makes ShadowRoot have its insertionParent be the <shadow>.
-        insertionParentTable.set(nextOlderTree, shadowInsertionPoint);
-        shadowInsertionPoint.olderShadowRoot_ = nextOlderTree;
+        assignToInsertionPoint(nextOlderTree, shadowInsertionPoint);
         this.remove(shadowInsertionPoint);
         var shadowDOMChildNodes = getChildNodesSnapshot(nextOlderTree);
         shadowDOMChildNodes.forEach(function(node) {
           this.renderNode(visualParent, nextOlderTree, node, true);
         }, this);
       } else {
         this.renderFallbackContent(visualParent, shadowInsertionPoint);
       }
     },
 
     renderFallbackContent: function (visualParent, fallbackHost) {
       var logicalChildNodes = getChildNodesSnapshot(fallbackHost);
+      this.associateNode(fallbackHost);
+      this.remove(fallbackHost);
       logicalChildNodes.forEach(function(node) {
         this.appendChild(visualParent, node);
       }, this);
     },
 
+    /**
+     * Invalidates the attributes used to keep track of which attributes may
+     * cause the renderer to be invalidated.
+     */
+    invalidateAttributes: function() {
+      this.attributes = Object.create(null);
+    },
+
+    /**
+     * Parses the selector and makes this renderer dependent on the attribute
+     * being used in the selector.
+     * @param {string} selector
+     */
+    updateDependentAttributes: function(selector) {
+      if (!selector)
+        return;
+
+      var attributes = this.attributes;
+
+      // .class
+      if (/\.\w+/.test(selector))
+        attributes['class'] = true;
+
+      // #id
+      if (/#\w+/.test(selector))
+        attributes['id'] = true;
+
+      selector.replace(/\[\s*([^\s=\|~\]]+)/g, function(_, name) {
+        attributes[name] = true;
+      });
+
+      // Pseudo selectors have been removed from the spec.
+    },
+
+    dependsOnAttribute: function(name) {
+      return this.attributes[name];
+    },
+
+    // http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#dfn-distribution-algorithm
+    distribute: function(tree, pool) {
+      var anyRemoved = false;
+      var self = this;
+
+      visit(tree, isActiveInsertionPoint,
+          function(insertionPoint) {
+            resetDistributedChildNodes(insertionPoint);
+            self.updateDependentAttributes(
+                insertionPoint.getAttribute('select'));
+
+            for (var i = 0; i < pool.length; i++) {  // 1.2
+              var node = pool[i];  // 1.2.1
+              if (node === undefined)  // removed
+                continue;
+              if (matchesCriteria(node, insertionPoint)) {  // 1.2.2
+                distributeChildToInsertionPoint(node, insertionPoint);  // 1.2.2.1
+                pool[i] = undefined;  // 1.2.2.2
+                anyRemoved = true;
+              }
+            }
+          });
+
+      if (!anyRemoved)
+        return pool;
+
+      return pool.filter(function(item) {
+        return item !== undefined;
+      });
+    },
+
     // http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#dfn-tree-composition
     treeComposition: function () {
       var shadowHost = this.host;
       var tree = shadowHost.shadowRoot;  // 1.
       var pool = [];  // 2.
       var shadowHostChildNodes = getChildNodesSnapshot(shadowHost);
       shadowHostChildNodes.forEach(function(child) {  // 3.
         if (isInsertionPoint(child)) {  // 3.2.
           var reprojected = getDistributedChildNodes(child);  // 3.2.1.
           // if reprojected is undef... reset it?
           if (!reprojected || !reprojected.length)  // 3.2.2.
             reprojected = getChildNodesSnapshot(child);
           pool.push.apply(pool, reprojected);  // 3.2.3.
         } else {
           pool.push(child); // 3.3.
         }
       });
 
       var shadowInsertionPoint, point;
       while (tree) {  // 4.
         // 4.1.
         shadowInsertionPoint = undefined;  // Reset every iteration.
         visit(tree, isActiveShadowInsertionPoint, function(point) {
           shadowInsertionPoint = point;
           return false;
         });
         point = shadowInsertionPoint;
 
-        pool = distribute(tree, pool);  // 4.2.
+        pool = this.distribute(tree, pool);  // 4.2.
         if (point) {  // 4.3.
-          var nextOlderTree = getNextOlderTree(tree);  // 4.3.1.
+          var nextOlderTree = tree.olderShadowRoot;  // 4.3.1.
           if (!nextOlderTree) {
             break;  // 4.3.1.1.
           } else {
             tree = nextOlderTree;  // 4.3.2.2.
-            assignShadowTreeToShadowInsertionPoint(tree, point);  // 4.3.2.2.
+            assignToInsertionPoint(tree, point);  // 4.3.2.2.
             continue;  // 4.3.2.3.
           }
         } else {
           break;  // 4.4.
         }
       }
     },
 
-    // Visual DOM mutation.
     appendChild: function(parent, child) {
+      // this.associateNode(child);
+      this.associateNode(parent);
       appendChild(parent, child);
-      this.associateNode(child);
     },
 
     remove: function(node) {
+      // this.associateNode(node);
+      this.associateNode(node.parentNode);
       remove(node);
-      this.associateNode(node);
     },
 
     removeAllChildNodes: function(parent) {
+      this.associateNode(parent);
       removeAllChildNodes(parent);
-      // TODO(arv): Does this need to associate all the nodes with this renderer?
     },
 
     associateNode: function(node) {
-      // TODO: Clear when moved out of shadow tree.
       shadowDOMRendererTable.set(node, this);
     }
   };
 
   function isInsertionPoint(node) {
     // Should this include <shadow>?
     return node.localName === 'content';
   }
 
   function isActiveInsertionPoint(node) {
     // <content> inside another <content> or <shadow> is considered inactive.
     return node.localName === 'content';
   }
 
   function isShadowInsertionPoint(node) {
     return node.localName === 'shadow';
   }
 
   function isActiveShadowInsertionPoint(node) {
     // <shadow> inside another <content> or <shadow> is considered inactive.
     return node.localName === 'shadow';
   }
 
   function isShadowHost(shadowHost) {
-    return !!shadowHost.shadowRoot;
-  }
-
-  /**
-   * @param {WrapperShadowRoot} tree
-   */
-  function getNextOlderTree(tree) {
-    return nextOlderShadowTreeTable.get(tree);
+    return shadowHost.shadowRoot;
   }
 
   function getShadowTrees(host) {
     var trees = [];
 
-    for (var tree = host.shadowRoot;
-         tree;
-         tree = nextOlderShadowTreeTable.get(tree)) {
+    for (var tree = host.shadowRoot; tree; tree = tree.olderShadowRoot) {
       trees.push(tree);
     }
     return trees;
   }
 
-  function assignShadowTreeToShadowInsertionPoint(tree, point) {
+  function assignToInsertionPoint(tree, point) {
     insertionParentTable.set(tree, point);
   }
 
   // http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#rendering-shadow-trees
   function render(host) {
     new ShadowRenderer(host).render();
   };
 
+  // Need to rerender shadow host when:
+  //
+  // - a direct child to the ShadowRoot is added or removed
+  // - a direct child to the host is added or removed
+  // - 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) {
-    // TODO: If this is in light DOM we only need to invalidate renderer if this
-    // is a direct child of a ShadowRoot.
-    // Maybe we should only associate renderers with direct child nodes of a
-    // shadow root (and all nodes in the shadow dom).
     var renderer = shadowDOMRendererTable.get(this);
-    if (!renderer)
-      return false;
-
-    var p;
-    if (force || this.shadowRoot ||
-        (p = this.parentNode) && (p.shadowRoot || p instanceof ShadowRoot)) {
+    if (renderer) {
       renderer.invalidate();
+      return true;
     }
 
-    return true;
+    return false;
   };
 
   HTMLContentElement.prototype.getDistributedNodes = function() {
-    // TODO(arv): We should associate the element with the shadow root so we
-    // only have to rerender this ShadowRenderer.
-    renderAllPending();
+    var renderer = shadowDOMRendererTable.get(this);
+    if (renderer)
+      renderer.render();
     return getDistributedChildNodes(this);
   };
 
-  mixin(Node.prototype, {
-    get insertionParent() {
-      return insertionParentTable.get(this) || null;
-    }
-  });
+  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);
+    if (renderer)
+      renderer.invalidate();
+  };
 
   scope.eventParentsTable = eventParentsTable;
   scope.getRendererForHost = getRendererForHost;
   scope.getShadowTrees = getShadowTrees;
-  scope.nextOlderShadowTreeTable = nextOlderShadowTreeTable;
+  scope.insertionParentTable = insertionParentTable;
   scope.renderAllPending = renderAllPending;
 
   // Exposed for testing
   scope.visual = {
     removeAllChildNodes: removeAllChildNodes,
     appendChild: appendChild,
     removeChild: removeChild
   };
 
 })(this.ShadowDOMPolyfill);
 // Copyright 2013 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
 // license that can be found in the LICENSE file.
 
 (function(scope) {
   'use strict';
 
+  var HTMLElement = scope.wrappers.HTMLElement;
+  var assert = scope.assert;
+  var mixin = scope.mixin;
+  var registerWrapper = scope.registerWrapper;
+  var unwrap = scope.unwrap;
+  var wrap = scope.wrap;
+
+  var elementsWithFormProperty = [
+    'HTMLButtonElement',
+    'HTMLFieldSetElement',
+    'HTMLInputElement',
+    'HTMLKeygenElement',
+    'HTMLLabelElement',
+    'HTMLLegendElement',
+    'HTMLObjectElement',
+    'HTMLOptionElement',
+    'HTMLOutputElement',
+    'HTMLSelectElement',
+    'HTMLTextAreaElement',
+  ];
+
+  function createWrapperConstructor(name) {
+    if (!window[name])
+      return;
+
+    // Ensure we are not overriding an already existing constructor.
+    assert(!scope.wrappers[name]);
+
+    var GeneratedWrapper = function(node) {
+      // At this point all of them extend HTMLElement.
+      HTMLElement.call(this, node);
+    }
+    GeneratedWrapper.prototype = Object.create(HTMLElement.prototype);
+    mixin(GeneratedWrapper.prototype, {
+      get form() {
+        return wrap(unwrap(this).form);
+      },
+    });
+
+    registerWrapper(window[name], GeneratedWrapper,
+        document.createElement(name.slice(4, -7)));
+    scope.wrappers[name] = GeneratedWrapper;
+  }
+
+  elementsWithFormProperty.forEach(createWrapperConstructor);
+
+})(this.ShadowDOMPolyfill);
+
+// Copyright 2013 The Polymer Authors. All rights reserved.
+// Use of this source code is goverened by a BSD-style
+// license that can be found in the LICENSE file.
+
+(function(scope) {
+  'use strict';
+
   var GetElementsByInterface = scope.GetElementsByInterface;
   var Node = scope.wrappers.Node;
   var ParentNodeInterface = scope.ParentNodeInterface;
   var SelectorsInterface = scope.SelectorsInterface;
+  var ShadowRoot = scope.wrappers.ShadowRoot;
   var defineWrapGetter = scope.defineWrapGetter;
   var elementFromPoint = scope.elementFromPoint;
   var forwardMethodsToWrapper = scope.forwardMethodsToWrapper;
+  var matchesName = scope.matchesName;
   var mixin = scope.mixin;
   var registerWrapper = scope.registerWrapper;
   var unwrap = scope.unwrap;
   var wrap = scope.wrap;
   var wrapEventTargetMethods = scope.wrapEventTargetMethods;
   var wrapNodeList = scope.wrapNodeList;
 
   var implementationTable = new SideTable();
 
   function Document(node) {
@@ skipping 12 matching lines @@
   // directly on the instance.
 
   function wrapMethod(name) {
     var original = document[name];
     Document.prototype[name] = function() {
       return wrap(original.apply(this.impl, arguments));
     };
   }
 
   [
-    'getElementById',
+    'createComment',
+    'createDocumentFragment',
     'createElement',
     'createElementNS',
-    'createTextNode',
-    'createDocumentFragment',
     'createEvent',
     'createEventNS',
+    'createRange',
+    'createTextNode',
+    'getElementById',
   ].forEach(wrapMethod);
 
   var originalAdoptNode = document.adoptNode;
-  var originalWrite = document.write;
+
+  function adoptNodeNoRemove(node, doc) {
+    originalAdoptNode.call(doc.impl, unwrap(node));
+    adoptSubtree(node, doc);
+  }
+
+  function adoptSubtree(node, doc) {
+    if (node.shadowRoot)
+      doc.adoptNode(node.shadowRoot);
+    if (node instanceof ShadowRoot)
+      adoptOlderShadowRoots(node, doc);
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      adoptSubtree(child, doc);
+    }
+  }
+
+  function adoptOlderShadowRoots(shadowRoot, doc) {
+    var oldShadowRoot = shadowRoot.olderShadowRoot;
+    if (oldShadowRoot)
+      doc.adoptNode(oldShadowRoot);
+  }
 
   mixin(Document.prototype, {
     adoptNode: function(node) {
-      originalAdoptNode.call(this.impl, unwrap(node));
+      if (node.parentNode)
+        node.parentNode.removeChild(node);
+      adoptNodeNoRemove(node, this);
       return node;
     },
     elementFromPoint: function(x, y) {
       return elementFromPoint(this, this, x, y);
-    },
-    write: function(s) {
-      var all = this.querySelectorAll('*');
-      var last = all[all.length - 1];
-      while (last.nextSibling) {
-        last = last.nextSibling;
-      }
-      var p = last.parentNode;
-      p.lastChild_ = undefined;
-      last.nextSibling_ = undefined;
-      originalWrite.call(this.impl, s);
     }
   });
 
+  if (document.register) {
+    var originalRegister = document.register;
+    Document.prototype.register = function(tagName, object) {
+      var prototype = object.prototype;
+
+      // If we already used the object as a prototype for another custom
+      // element.
+      if (scope.nativePrototypeTable.get(prototype)) {
+        // TODO(arv): DOMException
+        throw new Error('NotSupportedError');
+      }
+
+      // Find first object on the prototype chain that already have a native
+      // prototype. Keep track of all the objects before that so we can create
+      // a similar structure for the native case.
+      var proto = Object.getPrototypeOf(prototype);
+      var nativePrototype;
+      var prototypes = [];
+      while (proto) {
+        nativePrototype = scope.nativePrototypeTable.get(proto);
+        if (nativePrototype)
+          break;
+        prototypes.push(proto);
+        proto = Object.getPrototypeOf(proto);
+      }
+
+      if (!nativePrototype) {
+        // TODO(arv): DOMException
+        throw new Error('NotSupportedError');
+      }
+
+      // This works by creating a new prototype object that is empty, but has
+      // the native prototype as its proto. The original prototype object
+      // passed into register is used as the wrapper prototype.
+
+      var newPrototype = Object.create(nativePrototype);
+      for (var i = prototypes.length - 1; i >= 0; i--) {
+        newPrototype = Object.create(newPrototype);
+      }
+
+      // Add callbacks if present.
+      // Names are taken from:
+      //   https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/bindings/v8/CustomElementConstructorBuilder.cpp&sq=package:chromium&type=cs&l=156
+      // and not from the spec since the spec is out of date.
+      [
+        'createdCallback',
+        'enteredDocumentCallback',
+        'leftDocumentCallback',
+        'attributeChangedCallback',
+      ].forEach(function(name) {
+        var f = prototype[name];
+        if (!f)
+          return;
+        newPrototype[name] = function() {
+          f.apply(wrap(this), arguments);
+        };
+      });
+
+      var nativeConstructor = originalRegister.call(unwrap(this), tagName,
+          {prototype: newPrototype});
+
+      function GeneratedWrapper(node) {
+        if (!node)
+          return document.createElement(tagName);
+        this.impl = node;
+      }
+      GeneratedWrapper.prototype = prototype;
+      GeneratedWrapper.prototype.constructor = GeneratedWrapper;
+
+      scope.constructorTable.set(newPrototype, GeneratedWrapper);
+      scope.nativePrototypeTable.set(prototype, newPrototype);
+
+      return GeneratedWrapper;
+    };
+
+    forwardMethodsToWrapper([
+      window.HTMLDocument || window.Document,  // Gecko adds these to HTMLDocument
+    ], [
+      'register',
+    ]);
+  }
+
   // We also override some of the methods on document.body and document.head
   // for convenience.
   forwardMethodsToWrapper([
     window.HTMLBodyElement,
     window.HTMLDocument || window.Document,  // Gecko adds these to HTMLDocument
     window.HTMLHeadElement,
+    window.HTMLHtmlElement,
   ], [
     'appendChild',
     'compareDocumentPosition',
+    'contains',
     'getElementsByClassName',
     'getElementsByTagName',
     'getElementsByTagNameNS',
     'insertBefore',
     'querySelector',
     'querySelectorAll',
     'removeChild',
     'replaceChild',
+    matchesName,
   ]);
 
   forwardMethodsToWrapper([
     window.HTMLDocument || window.Document,  // Gecko adds these to HTMLDocument
   ], [
     'adoptNode',
+    'contains',
+    'createComment',
     'createDocumentFragment',
     'createElement',
     'createElementNS',
     'createEvent',
     'createEventNS',
+    'createRange',
     'createTextNode',
     'elementFromPoint',
     'getElementById',
-    'write',
   ]);
 
   mixin(Document.prototype, GetElementsByInterface);
   mixin(Document.prototype, ParentNodeInterface);
   mixin(Document.prototype, SelectorsInterface);
 
   mixin(Document.prototype, {
     get implementation() {
       var implementation = implementationTable.get(this);
       if (implementation)
@@ skipping 46 matching lines @@
 
   forwardMethodsToWrapper([
     window.DOMImplementation,
   ], [
     'createDocumentType',
     'createDocument',
     'createHTMLDocument',
     'hasFeature',
   ]);
 
+  scope.adoptNodeNoRemove = adoptNodeNoRemove;
+  scope.wrappers.DOMImplementation = DOMImplementation;
   scope.wrappers.Document = Document;
-  scope.wrappers.DOMImplementation = DOMImplementation;
 
 })(this.ShadowDOMPolyfill);
 
 // Copyright 2013 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
 // license that can be found in the LICENSE file.
 
 (function(scope) {
   'use strict';
 
@@ skipping 126 matching lines @@
 
 })(this.ShadowDOMPolyfill);
 
 // Copyright 2013 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
 // license that can be found in the LICENSE file.
 
 (function(scope) {
   'use strict';
 
+  var registerWrapper = scope.registerWrapper;
+  var unwrap = scope.unwrap;
+  var unwrapIfNeeded = scope.unwrapIfNeeded;
+  var wrap = scope.wrap;
+
+  var OriginalRange = window.Range;
+
+  function Range(impl) {
+    this.impl = impl;
+  }
+  Range.prototype = {
+    get startContainer() {
+      return wrap(this.impl.startContainer);
+    },
+    get endContainer() {
+      return wrap(this.impl.endContainer);
+    },
+    get commonAncestorContainer() {
+      return wrap(this.impl.commonAncestorContainer);
+    },
+    setStart: function(refNode,offset) {
+      this.impl.setStart(unwrapIfNeeded(refNode), offset);
+    },
+    setEnd: function(refNode,offset) {
+      this.impl.setEnd(unwrapIfNeeded(refNode), offset);
+    },
+    setStartBefore: function(refNode) {
+      this.impl.setStartBefore(unwrapIfNeeded(refNode));
+    },
+    setStartAfter: function(refNode) {
+      this.impl.setStartAfter(unwrapIfNeeded(refNode));
+    },
+    setEndBefore: function(refNode) {
+      this.impl.setEndBefore(unwrapIfNeeded(refNode));
+    },
+    setEndAfter: function(refNode) {
+      this.impl.setEndAfter(unwrapIfNeeded(refNode));
+    },
+    selectNode: function(refNode) {
+      this.impl.selectNode(unwrapIfNeeded(refNode));
+    },
+    selectNodeContents: function(refNode) {
+      this.impl.selectNodeContents(unwrapIfNeeded(refNode));
+    },
+    compareBoundaryPoints: function(how, sourceRange) {
+      return this.impl.compareBoundaryPoints(how, unwrap(sourceRange));
+    },
+    extractContents: function() {
+      return wrap(this.impl.extractContents());
+    },
+    cloneContents: function() {
+      return wrap(this.impl.cloneContents());
+    },
+    insertNode: function(node) {
+      this.impl.insertNode(unwrapIfNeeded(node));
+    },
+    surroundContents: function(newParent) {
+      this.impl.surroundContents(unwrapIfNeeded(newParent));
+    },
+    cloneRange: function() {
+      return wrap(this.impl.cloneRange());
+    },
+    isPointInRange: function(node, offset) {
+      return this.impl.isPointInRange(unwrapIfNeeded(node), offset);
+    },
+    comparePoint: function(node, offset) {
+      return this.impl.comparePoint(unwrapIfNeeded(node), offset);
+    },
+    intersectsNode: function(node) {
+      return this.impl.intersectsNode(unwrapIfNeeded(node));
+    }
+  };
+
+  // IE9 does not have createContextualFragment.
+  if (OriginalRange.prototype.createContextualFragment) {
+    Range.prototype.createContextualFragment = function(html) {
+      return wrap(this.impl.createContextualFragment(html));
+    };
+  }
+
+  registerWrapper(window.Range, Range);
+
+  scope.wrappers.Range = Range;
+
+})(this.ShadowDOMPolyfill);
+
+// Copyright 2013 The Polymer Authors. All rights reserved.
+// Use of this source code is goverened by a BSD-style
+// license that can be found in the LICENSE file.
+
+(function(scope) {
+  'use strict';
+
   var isWrapperFor = scope.isWrapperFor;
 
   // This is a list of the elements we currently override the global constructor
   // for.
   var elements = {
     'a': 'HTMLAnchorElement',
     'applet': 'HTMLAppletElement',
     'area': 'HTMLAreaElement',
     'audio': 'HTMLAudioElement',
     'br': 'HTMLBRElement',
@@ skipping 105 matching lines @@
   });
 
   //TODO(sjmiles): review method alias with Arv
   HTMLElement.prototype.webkitCreateShadowRoot =
       HTMLElement.prototype.createShadowRoot;
 
   // 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 isWrapper = ShadowDOMPolyfill.isWrapper;
-    var unwrap = ShadowDOMPolyfill.unwrap;
+    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 (isWrapper(obj)) {
-        obj = unwrap(obj);
-
-        // Fix up class names for Firefox. For some of them like
-        // HTMLFormElement and HTMLInputElement, the "constructor" property of
-        // the unwrapped nodes points at the wrapper for some reason.
-        // TODO(jmesserly): figure out why this is happening.
+      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
+        // wrapper.
+        // Note: it is safe to check for the GeneratedWrapper string because
+        // we know it is some kind of Shadow DOM wrapper object.
         var ctor = obj.constructor;
-        if (ctor && ctor._ShadowDOMPolyfill$isGeneratedWrapper) {
+        if (ctor && ctor.name == 'GeneratedWrapper') {
           var name = ctor._ShadowDOMPolyfill$cacheTag_;
           if (!name) {
-            name = Object.prototype.toString.call(obj);
+            name = Object.prototype.toString.call(unwrapped);
             name = name.substring(8, name.length - 1);
             ctor._ShadowDOMPolyfill$cacheTag_ = name;
           }
           return name;
         }
+
+        obj = unwrapped;
       }
       return originalGetTag(obj);
     }
 
     return getTag;
   };
 })();
 
 // Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
@@ skipping 513 matching lines @@
       css.push(cssRules[i].cssText);
     }
     return css.join('\n\n');
   }
 
   // exports
   scope.ShadowCSS.shimShadowDOMStyling2 = shimShadowDOMStyling2;
 })(window.Platform);
 
 }