Version 0.8.10.4

dart/pkg/shadow_dom/lib/shadow_dom.debug.js

 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
@@ skipping 1866 matching lines @@
     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 getInsertionParent(node) || scope.getHostForShadowRoot(node);
+      return getInsertionParent(node) || node.host;
 
     // 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];
     }
@@ skipping 75 matching lines @@
         if (inSameTree(ancestor, target))  // 3.4.4.
           return stack[stack.length - 1];
 
         if (isShadowRoot(ancestor))  // 3.4.5.
           stack.pop();
 
         last = ancestor;  // 3.4.6.
         ancestor = calculateParents(ancestor, context, ancestors);  // 3.4.7.
       }
       if (isShadowRoot(target))  // 3.5.
-        target = scope.getHostForShadowRoot(target);
+        target = target.host;
       else
         target = target.parentNode;  // 3.6.
     }
   }
 
   function getInsertionParent(node) {
     return scope.insertionParentTable.get(node);
   }
 
   function isDistributed(node) {
     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);
-    }
+    if (a instanceof wrappers.ShadowRoot)
+      return enclosedBy(rootOfNode(a.host), b);
     return false;
   }
 
   var mutationEventsAreSilenced = 0;
 
   function muteMutationEvents() {
     mutationEventsAreSilenced++;
   }
 
   function unmuteMutationEvents() {
@@ skipping 401 matching lines @@
 
   [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);
+      wrapper = wrapper.host;
     return unwrap(wrapper);
   }
 
   EventTarget.prototype = {
     addEventListener: function(type, fun, capture) {
       if (!isValidListener(fun))
         return;
 
       var listener = new Listener(type, fun, capture);
       var listeners = listenersTable.get(this);
@@ skipping 216 matching lines @@
       node.previousSibling_ = previousNode;
       node.nextSibling_ = nextNode;
       if (previousNode)
         previousNode.nextSibling_ = node;
       if (nextNode)
         nextNode.previousSibling_ = node;
       return [node];
     }
 
     var nodes = [];
-    var firstChild;
-    while (firstChild = node.firstChild) {
-      node.removeChild(firstChild);
-      nodes.push(firstChild);
-      firstChild.parentNode_ = parentNode;
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      nodes.push(child);
+    }
+
+    for (var i = nodes.length - 1; i >= 0; i--) {
+      node.removeChild(nodes[i]);
+      nodes[i].parentNode_ = parentNode;
     }
 
     for (var i = 0; i < nodes.length; i++) {
       nodes[i].previousSibling_ = nodes[i - 1] || previousNode;
       nodes[i].nextSibling_ = nodes[i + 1] || nextNode;
     }
 
     if (previousNode)
       previousNode.nextSibling_ = nodes[0];
     if (nextNode)
@@ skipping 129 matching lines @@
      */
     this.nextSibling_ = undefined;
 
     /**
      * @type {Node|undefined}
      * @private
      */
     this.previousSibling_ = undefined;
   };
 
+  var OriginalDocumentFragment = window.DocumentFragment;
   var originalAppendChild = OriginalNode.prototype.appendChild;
-  var originalInsertBefore = OriginalNode.prototype.insertBefore;
-  var originalReplaceChild = OriginalNode.prototype.replaceChild;
-  var originalRemoveChild = OriginalNode.prototype.removeChild;
   var originalCompareDocumentPosition =
       OriginalNode.prototype.compareDocumentPosition;
+  var originalInsertBefore = OriginalNode.prototype.insertBefore;
+  var originalRemoveChild = OriginalNode.prototype.removeChild;
+  var originalReplaceChild = OriginalNode.prototype.replaceChild;
+
+  var isIe = /Trident/.test(navigator.userAgent);
+
+  var removeChildOriginalHelper = isIe ?
+      function(parent, child) {
+        try {
+          originalRemoveChild.call(parent, child);
+        } catch (ex) {
+          if (!(parent instanceof OriginalDocumentFragment))
+            throw ex;
+        }
+      } :
+      function(parent, child) {
+        originalRemoveChild.call(parent, child);
+      };
 
   Node.prototype = Object.create(EventTarget.prototype);
   mixin(Node.prototype, {
     appendChild: function(childWrapper) {
       assertIsNodeWrapper(childWrapper);
 
       var nodes;
 
       if (this.invalidateShadowRenderer() || invalidateParent(childWrapper)) {
         var previousNode = this.lastChild;
@@ skipping 55 matching lines @@
       }
 
       nodesWereAdded(nodes);
 
       return childWrapper;
     },
 
     removeChild: function(childWrapper) {
       assertIsNodeWrapper(childWrapper);
       if (childWrapper.parentNode !== this) {
-        // TODO(arv): DOMException
-        throw new Error('NotFoundError');
+        // IE has invalid DOM trees at times.
+        var found = false;
+        var childNodes = this.childNodes;
+        for (var ieChild = this.firstChild; ieChild;
+             ieChild = ieChild.nextSibling) {
+          if (ieChild === childWrapper) {
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          // TODO(arv): DOMException
+          throw new Error('NotFoundError');
+        }
       }
 
       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;
 
         var parentNode = childNode.parentNode;
         if (parentNode)
-          originalRemoveChild.call(parentNode, childNode);
+          removeChildOriginalHelper(parentNode, childNode);
 
         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_ = undefined;
       } else {
-        originalRemoveChild.call(this.impl, childNode);
+        removeChildOriginalHelper(this.impl, childNode);
       }
 
       return childWrapper;
     },
 
     replaceChild: function(newChildWrapper, oldChildWrapper) {
       assertIsNodeWrapper(newChildWrapper);
       assertIsNodeWrapper(oldChildWrapper);
 
       if (oldChildWrapper.parentNode !== this) {
@@ skipping 766 matching lines @@
   registerWrapper(OriginalHTMLImageElement, HTMLImageElement,
                   document.createElement('img'));
 
   function Image(width, height) {
     if (!(this instanceof Image)) {
       throw new TypeError(
           'DOM object constructor cannot be called as a function.');
     }
 
     var node = unwrap(document.createElement('img'));
+    HTMLElement.call(this, node);
+    rewrap(node, this);
+
     if (width !== undefined)
       node.width = width;
     if (height !== undefined)
       node.height = height;
-    HTMLElement.call(this, node);
-    rewrap(node, this);
   }
 
   Image.prototype = HTMLImageElement.prototype;
 
   scope.wrappers.HTMLImageElement = HTMLImageElement;
   scope.wrappers.Image = Image;
 })(this.ShadowDOMPolyfill);
 
 // Copyright 2013 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
@@ skipping 106 matching lines @@
 
   scope.wrappers.HTMLTemplateElement = HTMLTemplateElement;
 })(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 registerWrapper = scope.registerWrapper;
+
+  var OriginalHTMLMediaElement = window.HTMLMediaElement;
+
+  function HTMLMediaElement(node) {
+    HTMLElement.call(this, node);
+  }
+  HTMLMediaElement.prototype = Object.create(HTMLElement.prototype);
+
+  registerWrapper(OriginalHTMLMediaElement, HTMLMediaElement,
+                  document.createElement('audio'));
+
+  scope.wrappers.HTMLMediaElement = HTMLMediaElement;
+})(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 HTMLMediaElement = scope.wrappers.HTMLMediaElement;
+  var registerWrapper = scope.registerWrapper;
+  var unwrap = scope.unwrap;
+  var rewrap = scope.rewrap;
+
+  var OriginalHTMLAudioElement = window.HTMLAudioElement;
+
+  function HTMLAudioElement(node) {
+    HTMLMediaElement.call(this, node);
+  }
+  HTMLAudioElement.prototype = Object.create(HTMLMediaElement.prototype);
+
+  registerWrapper(OriginalHTMLAudioElement, HTMLAudioElement,
+                  document.createElement('audio'));
+
+  function Audio(src) {
+    if (!(this instanceof Audio)) {
+      throw new TypeError(
+          'DOM object constructor cannot be called as a function.');
+    }
+
+    var node = unwrap(document.createElement('audio'));
+    HTMLMediaElement.call(this, node);
+    rewrap(node, this);
+
+    node.setAttribute('preload', 'auto');
+    if (src !== undefined)
+      node.setAttribute('src', src);
+  }
+
+  Audio.prototype = HTMLAudioElement.prototype;
+
+  scope.wrappers.HTMLAudioElement = HTMLAudioElement;
+  scope.wrappers.Audio = Audio;
+})(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 mixin = scope.mixin;
+  var registerWrapper = scope.registerWrapper;
+  var rewrap = scope.rewrap;
+  var unwrap = scope.unwrap;
+  var wrap = scope.wrap;
+
+  var OriginalHTMLOptionElement = window.HTMLOptionElement;
+
+  function trimText(s) {
+    return s.replace(/\s+/g, ' ').trim();
+  }
+
+  function HTMLOptionElement(node) {
+    HTMLElement.call(this, node);
+  }
+  HTMLOptionElement.prototype = Object.create(HTMLElement.prototype);
+  mixin(HTMLOptionElement.prototype, {
+    get text() {
+      return trimText(this.textContent);
+    },
+    set text(value) {
+      this.textContent = trimText(String(value));
+    },
+    get form() {
+      return wrap(unwrap(this).form);
+    }
+  });
+
+  registerWrapper(OriginalHTMLOptionElement, HTMLOptionElement,
+                  document.createElement('option'));
+
+  function Option(text, value, defaultSelected, selected) {
+    if (!(this instanceof Option)) {
+      throw new TypeError(
+          'DOM object constructor cannot be called as a function.');
+    }
+
+    var node = unwrap(document.createElement('option'));
+    HTMLElement.call(this, node);
+    rewrap(node, this);
+
+    if (text !== undefined)
+      node.text = text;
+    if (value !== undefined)
+      node.setAttribute('value', value);
+    if (defaultSelected === true)
+      node.setAttribute('selected', '');
+    node.selected = selected === true;
+  }
+
+  Option.prototype = HTMLOptionElement.prototype;
+
+  scope.wrappers.HTMLOptionElement = HTMLOptionElement;
+  scope.wrappers.Option = Option;
+})(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 HTMLContentElement = scope.wrappers.HTMLContentElement;
   var HTMLElement = scope.wrappers.HTMLElement;
   var HTMLShadowElement = scope.wrappers.HTMLShadowElement;
   var HTMLTemplateElement = scope.wrappers.HTMLTemplateElement;
   var mixin = scope.mixin;
   var registerWrapper = scope.registerWrapper;
 
   var OriginalHTMLUnknownElement = window.HTMLUnknownElement;
 
   function HTMLUnknownElement(node) {
@@ skipping 159 matching lines @@
     },
     set innerHTML(value) {
       setInnerHTML(this, value);
       this.invalidateShadowRenderer();
     },
 
     get olderShadowRoot() {
       return nextOlderShadowTreeTable.get(this) || null;
     },
 
+    get host() {
+      return shadowHostTable.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 Element = scope.wrappers.Element;
   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 muteMutationEvents = scope.muteMutationEvents;
   var oneOf = scope.oneOf;
   var unmuteMutationEvents = scope.unmuteMutationEvents;
   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
@@ skipping 221 matching lines @@
 
   function getShadowRootAncestor(node) {
     for (; node; node = node.parentNode) {
       if (node instanceof ShadowRoot)
         return node;
     }
     return null;
   }
 
   function getRendererForShadowRoot(shadowRoot) {
-    return getRendererForHost(getHostForShadowRoot(shadowRoot));
+    return getRendererForHost(shadowRoot.host);
   }
 
   var spliceDiff = new ArraySplice();
   spliceDiff.equals = function(renderNode, rawNode) {
     return unwrap(renderNode.node) === rawNode;
   };
 
   /**
    * RenderNode is used as an in memory "render tree". When we render the
    * composed tree we create a tree of RenderNodes, then we diff this against
@@ skipping 408 matching lines @@
   var wrap = scope.wrap;
 
   var elementsWithFormProperty = [
     'HTMLButtonElement',
     'HTMLFieldSetElement',
     'HTMLInputElement',
     'HTMLKeygenElement',
     'HTMLLabelElement',
     'HTMLLegendElement',
     'HTMLObjectElement',
-    'HTMLOptionElement',
+    // HTMLOptionElement is handled in HTMLOptionElement.js
     'HTMLOutputElement',
     'HTMLSelectElement',
     'HTMLTextAreaElement',
   ];
 
   function createWrapperConstructor(name) {
     if (!window[name])
       return;
 
     // Ensure we are not overriding an already existing constructor.
@@ skipping 164 matching lines @@
         '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,
-          object.extends ? {prototype: newPrototype, extends: object.extends} :
-          {prototype: newPrototype});
+      var p = {prototype: newPrototype};
+      if (object.extends)
+        p.extends = object.extends;
+      var nativeConstructor = originalRegister.call(unwrap(this), tagName, p);
 
       function GeneratedWrapper(node) {
-        if (!node)
-          return document.createElement(tagName);
+        if (!node) {
+          if (object.extends) {
+            return document.createElement(object.extends, tagName);
+          } else {
+            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;
     };
@@ skipping 353 matching lines @@
   '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',
     'base': 'HTMLBaseElement',
     'body': 'HTMLBodyElement',
     'button': 'HTMLButtonElement',
     // 'command': 'HTMLCommandElement',  // Not fully implemented in Gecko.
     'dl': 'HTMLDListElement',
     'datalist': 'HTMLDataListElement',
     'data': 'HTMLDataElement',
     'dir': 'HTMLDirectoryElement',
     'div': 'HTMLDivElement',
     'embed': 'HTMLEmbedElement',
     'fieldset': 'HTMLFieldSetElement',
     'font': 'HTMLFontElement',
     'form': 'HTMLFormElement',
     'frame': 'HTMLFrameElement',
     'frameset': 'HTMLFrameSetElement',
     'hr': 'HTMLHRElement',
     'head': 'HTMLHeadElement',
     'h1': 'HTMLHeadingElement',
     'html': 'HTMLHtmlElement',
     'iframe': 'HTMLIFrameElement',
     'input': 'HTMLInputElement',
     'li': 'HTMLLIElement',
     'label': 'HTMLLabelElement',
     'legend': 'HTMLLegendElement',
     'link': 'HTMLLinkElement',
     'map': 'HTMLMapElement',
     'marquee': 'HTMLMarqueeElement',
-    // 'media', Covered by audio and video
     'menu': 'HTMLMenuElement',
     'menuitem': 'HTMLMenuItemElement',
     'meta': 'HTMLMetaElement',
     'meter': 'HTMLMeterElement',
     'del': 'HTMLModElement',
     'ol': 'HTMLOListElement',
     'object': 'HTMLObjectElement',
     'optgroup': 'HTMLOptGroupElement',
     'option': 'HTMLOptionElement',
     'output': 'HTMLOutputElement',
@@ skipping 123 matching lines @@
 
 /*
  * Copyright 2012 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.
  */
 
 /*
   This is a limited shim for ShadowDOM css styling.
   https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles
-
-  The intention here is to support only the styling features which can be
-  relatively simply implemented. The goal is to allow users to avoid the
-  most obvious pitfalls and do so without compromising performance significantly.
+  
+  The intention here is to support only the styling features which can be 
+  relatively simply implemented. The goal is to allow users to avoid the 
+  most obvious pitfalls and do so without compromising performance significantly. 
   For ShadowDOM styling that's not covered here, a set of best practices
   can be provided that should allow users to accomplish more complex styling.
 
   The following is a list of specific ShadowDOM styling features and a brief
   discussion of the approach used to shim.
 
   Shimmed features:
 
-  * @host: ShadowDOM allows styling of the shadowRoot's host element using the
-  @host rule. To shim this feature, the @host styles are reformatted and
+  * @host: ShadowDOM allows styling of the shadowRoot's host element using the 
+  @host rule. To shim this feature, the @host styles are reformatted and 
   prefixed with a given scope name and promoted to a document level stylesheet.
   For example, given a scope name of .foo, a rule like this:
-
+  
     @host {
       * {
         background: red;
       }
     }
-
+  
   becomes:
-
+  
     .foo {
       background: red;
     }
-
-  * encapsultion: Styles defined within ShadowDOM, apply only to
+  
+  * encapsultion: Styles defined within ShadowDOM, apply only to 
   dom inside the ShadowDOM. Polymer uses one of two techniques to imlement
   this feature.
-
-  By default, rules are prefixed with the host element tag name
+  
+  By default, rules are prefixed with the host element tag name 
   as a descendant selector. This ensures styling does not leak out of the 'top'
   of the element's ShadowDOM. For example,
 
   div {
       font-weight: bold;
     }
-
+  
   becomes:
 
   x-foo div {
       font-weight: bold;
     }
-
+  
   becomes:
 
 
-  Alternatively, if Platform.ShadowCSS.strictStyling is set to true then
+  Alternatively, if Platform.ShadowCSS.strictStyling is set to true then 
   selectors are scoped by adding an attribute selector suffix to each
-  simple selector that contains the host element tag name. Each element
-  in the element's ShadowDOM template is also given the scope attribute.
+  simple selector that contains the host element tag name. Each element 
+  in the element's ShadowDOM template is also given the scope attribute. 
   Thus, these rules match only elements that have the scope attribute.
   For example, given a scope name of x-foo, a rule like this:
-
+  
     div {
       font-weight: bold;
     }
-
+  
   becomes:
-
+  
     div[x-foo] {
       font-weight: bold;
     }
 
   Note that elements that are dynamically added to a scope must have the scope
   selector added to them manually.
 
   * ::pseudo: These rules are converted to rules that take advantage of the
   pseudo attribute. For example, a shadowRoot like this inside an x-foo
 
@@ skipping 11 matching lines @@
   part attribute. For example, a shadowRoot like this inside an x-foo
 
     <div part="special">Special</div>
 
   with a rule like this:
 
     x-foo::part(special) { ... }
 
   becomes:
 
-    x-foo [part=special] { ... }
-
+    x-foo [part=special] { ... }    
+  
   Unaddressed ShadowDOM styling features:
-
+  
   * upper/lower bound encapsulation: Styles which are defined outside a
   shadowRoot should not cross the ShadowDOM boundary and should not apply
   inside a shadowRoot.
 
-  This styling behavior is not emulated. Some possible ways to do this that
+  This styling behavior is not emulated. Some possible ways to do this that 
   were rejected due to complexity and/or performance concerns include: (1) reset
   every possible property for every possible selector for a given scope name;
   (2) re-implement css in javascript.
-
+  
   As an alternative, users should make sure to use selectors
   specific to the scope in which they are working.
-
+  
   * ::distributed: This behavior is not emulated. It's often not necessary
   to style the contents of a specific insertion point and instead, descendants
-  of the host element can be styled selectively. Users can also create an
+  of the host element can be styled selectively. Users can also create an 
   extra node around an insertion point and style that node's contents
   via descendent selectors. For example, with a shadowRoot like this:
-
+  
     <style>
       content::-webkit-distributed(div) {
         background: red;
       }
     </style>
     <content></content>
-
+  
   could become:
-
+  
     <style>
-      / *@polyfill .content-container div * /
+      / *@polyfill .content-container div * / 
       content::-webkit-distributed(div) {
         background: red;
       }
     </style>
     <div class="content-container">
       <content></content>
     </div>
-
+  
   Note the use of @polyfill in the comment above a ShadowDOM specific style
-  declaration. This is a directive to the styling shim to use the selector
+  declaration. This is a directive to the styling shim to use the selector 
   in comments in lieu of the next selector when running under polyfill.
 */
 (function(scope) {
 
 var ShadowCSS = {
   strictStyling: false,
   registry: {},
   // Shim styles for a given root associated with a name and extendsName
   // 1. cache root styles by name
   // 2. optionally tag root nodes with scope name
@@ skipping 15 matching lines @@
     var cssText = this.stylesToShimmedCssText(def.scopeStyles, name,
         typeExtension);
     // note: we only need to do rootStyles since these are unscoped.
     cssText += this.extractPolyfillUnscopedRules(def.rootStyles);
     // provide shimmedStyle for user extensibility
     def.shimmedStyle = cssTextToStyle(cssText);
     if (root) {
       root.shimmedStyle = def.shimmedStyle;
     }
     // remove existing style elements
-    for (var i=0, l=def.rootStyles.length, s; (i<l) && (s=def.rootStyles[i]);
+    for (var i=0, l=def.rootStyles.length, s; (i<l) && (s=def.rootStyles[i]); 
         i++) {
       s.parentNode.removeChild(s);
     }
     // add style to document
     addCssToDocument(cssText);
   },
   registerDefinition: function(root, name, extendsName) {
     var def = this.registry[name] = {
       root: root,
       name: name,
@@ skipping 23 matching lines @@
       Array.prototype.forEach.call(root.querySelectorAll('template'),
           function(template) {
             this.applyScopeToContent(template.content, name);
           },
           this);
     }
   },
   /*
    * Process styles to convert native ShadowDOM rules that will trip
    * up the css parser; we rely on decorating the stylesheet with comments.
-   *
+   * 
    * For example, we convert this rule:
-   *
+   * 
    * (comment start) @polyfill :host menu-item (comment end)
    * shadow::-webkit-distributed(menu-item) {
-   *
+   * 
    * to this:
-   *
+   * 
    * scopeName menu-item {
    *
   **/
   insertPolyfillDirectives: function(styles) {
     if (styles) {
       Array.prototype.forEach.call(styles, function(s) {
         s.textContent = this.insertPolyfillDirectivesInCssText(s.textContent);
       }, this);
     }
   },
   insertPolyfillDirectivesInCssText: function(cssText) {
     return cssText.replace(cssPolyfillCommentRe, function(match, p1) {
       // remove end comment delimiter and add block start
       return p1.slice(0, -2) + '{';
     });
   },
   /*
    * Process styles to add rules which will only apply under the polyfill
-   *
+   * 
    * For example, we convert this rule:
-   *
-   * (comment start) @polyfill-rule :host menu-item {
+   * 
+   * (comment start) @polyfill-rule :host menu-item { 
    * ... } (comment end)
-   *
+   * 
    * to this:
-   *
+   * 
    * scopeName menu-item {...}
    *
   **/
   insertPolyfillRules: function(styles) {
     if (styles) {
       Array.prototype.forEach.call(styles, function(s) {
         s.textContent = this.insertPolyfillRulesInCssText(s.textContent);
       }, this);
     }
   },
   insertPolyfillRulesInCssText: function(cssText) {
     return cssText.replace(cssPolyfillRuleCommentRe, function(match, p1) {
       // remove end comment delimiter
       return p1.slice(0, -1);
     });
   },
   /*
    * Process styles to add rules which will only apply under the polyfill
-   * and do not process via CSSOM. (CSSOM is destructive to rules on rare
+   * and do not process via CSSOM. (CSSOM is destructive to rules on rare 
    * occasions, e.g. -webkit-calc on Safari.)
    * For example, we convert this rule:
-   *
-   * (comment start) @polyfill-unscoped-rule menu-item {
+   * 
+   * (comment start) @polyfill-unscoped-rule menu-item { 
    * ... } (comment end)
-   *
+   * 
    * to this:
-   *
+   * 
    * menu-item {...}
    *
   **/
   extractPolyfillUnscopedRules: function(styles) {
     var cssText = '';
     if (styles) {
       Array.prototype.forEach.call(styles, function(s) {
         cssText += this.extractPolyfillUnscopedRulesFromCssText(
             s.textContent) + '\n\n';
       }, this);
@@ skipping 18 matching lines @@
     if (styles) {
       return this.convertAtHostStyles(styles, name, typeExtension);
     }
   },
   convertAtHostStyles: function(styles, name, typeExtension) {
     var cssText = stylesToCssText(styles), self = this;
     cssText = cssText.replace(hostRuleRe, function(m, p1) {
       return self.scopeHostCss(p1, name, typeExtension);
     });
     cssText = rulesToCss(this.findAtHostRules(cssToRules(cssText),
-      new RegExp('^' + name + selectorReSuffix, 'm')));
+        this.makeScopeMatcher(name, typeExtension)));
     return cssText;
   },
   scopeHostCss: function(cssText, name, typeExtension) {
     var self = this;
     return cssText.replace(selectorRe, function(m, p1, p2) {
       return self.scopeHostSelector(p1, name, typeExtension) + ' ' + p2 + '\n\t';
     });
   },
   // supports scopig by name and  [is=name] syntax
   scopeHostSelector: function(selector, name, typeExtension) {
     var r = [], parts = selector.split(','), is = '[is=' + name + ']';
     parts.forEach(function(p) {
       p = p.trim();
       // selector: *|:scope -> name
       if (p.match(hostElementRe)) {
         p = p.replace(hostElementRe, typeExtension ? is + '$1$3' :
             name + '$1$3');
       // selector: .foo -> name.foo (OR) [bar] -> name[bar]
       } else if (p.match(hostFixableRe)) {
         p = typeExtension ? is + p : name + p;
       }
       r.push(p);
     }, this);
     return r.join(', ');
   },
   // consider styles that do not include component name in the selector to be
-  // unscoped and in need of promotion;
+  // unscoped and in need of promotion; 
   // for convenience, also consider keyframe rules this way.
   findAtHostRules: function(cssRules, matcher) {
-    return Array.prototype.filter.call(cssRules,
+    return Array.prototype.filter.call(cssRules, 
       this.isHostRule.bind(this, matcher));
   },
   isHostRule: function(matcher, cssRule) {
     return (cssRule.selectorText && cssRule.selectorText.match(matcher)) ||
       (cssRule.cssRules && this.findAtHostRules(cssRule.cssRules, matcher).length) ||
       (cssRule.type == CSSRule.WEBKIT_KEYFRAMES_RULE);
   },
   /* Ensure styles are scoped. Pseudo-scoping takes a rule like:
-   *
-   *  .foo {... }
-   *
+   * 
+   *  .foo {... } 
+   *  
    *  and converts this to
-   *
+   *  
    *  scopeName .foo { ... }
   */
   shimScoping: function(styles, name, typeExtension) {
     if (styles) {
       return this.convertScopedStyles(styles, name, typeExtension);
     }
   },
   convertScopedStyles: function(styles, name, typeExtension) {
     var cssText = stylesToCssText(styles).replace(hostRuleRe, '');
     cssText = this.insertPolyfillHostInCssText(cssText);
@@ skipping 10 matching lines @@
   },
   convertParts: function(cssText) {
     return cssText.replace(cssPartRe, ' [part=$1]');
   },
   /*
    * convert a rule like :host(.foo) > .bar { }
    *
    * to
    *
    * scopeName.foo > .bar, .foo scopeName > .bar { }
-   * TODO(sorvell): file bug since native impl does not do the former yet.
-   * http://jsbin.com/OganOCI/2/edit
+   * 
+   * and
+   *
+   * :host(.foo:host) .bar { ... }
+   * 
+   * to
+   * 
+   * scopeName.foo .bar { ... }
   */
   convertColonHost: function(cssText) {
     // p1 = :host, p2 = contents of (), p3 rest of rule
     return cssText.replace(cssColonHostRe, function(m, p1, p2, p3) {
-      return p2 ? polyfillHostNoCombinator + p2 + p3 + ', '
-          + p2 + ' ' + p1 + p3 :
-          p1 + p3;
+      p1 = polyfillHostNoCombinator;
+      if (p2) {
+        if (p2.match(polyfillHost)) {
+          return p1 + p2.replace(polyfillHost, '') + p3;
+        } else {
+          return p1 + p2 + p3 + ', ' + p2 + ' ' + p1 + p3;
+        }
+      } else {
+        return p1 + p3;
+      }
     });
   },
   /*
    * Convert ^ and ^^ combinators by replacing with space.
   */
   convertCombinators: function(cssText) {
     return cssText.replace('^^', ' ').replace('^', ' ');
   },
   // change a selector like 'div' to 'name div'
   scopeRules: function(cssRules, name, typeExtension) {
     var cssText = '';
     Array.prototype.forEach.call(cssRules, function(rule) {
       if (rule.selectorText && (rule.style && rule.style.cssText)) {
-        cssText += this.scopeSelector(rule.selectorText, name, typeExtension,
+        cssText += this.scopeSelector(rule.selectorText, name, typeExtension, 
           this.strictStyling) + ' {\n\t';
         cssText += this.propertiesFromRule(rule) + '\n}\n\n';
       } else if (rule.media) {
         cssText += '@media ' + rule.media.mediaText + ' {\n';
         cssText += this.scopeRules(rule.cssRules, name);
         cssText += '\n}\n\n';
       } else if (rule.cssText) {
         cssText += rule.cssText + '\n\n';
       }
     }, this);
     return cssText;
   },
   scopeSelector: function(selector, name, typeExtension, strict) {
     var r = [], parts = selector.split(',');
     parts.forEach(function(p) {
       p = p.trim();
       if (this.selectorNeedsScoping(p, name, typeExtension)) {
         p = strict ? this.applyStrictSelectorScope(p, name) :
           this.applySimpleSelectorScope(p, name, typeExtension);
       }
       r.push(p);
     }, this);
     return r.join(', ');
   },
   selectorNeedsScoping: function(selector, name, typeExtension) {
-    var matchScope = typeExtension ? name : '\\[is=' + name + '\\]';
-    var re = new RegExp('^(' + matchScope + ')' + selectorReSuffix, 'm');
+    var re = this.makeScopeMatcher(name, typeExtension);
     return !selector.match(re);
   },
+  makeScopeMatcher: function(name, typeExtension) {
+    var matchScope = typeExtension ? '\\[is=[\'"]?' + name + '[\'"]?\\]' : name;
+    return new RegExp('^(' + matchScope + ')' + selectorReSuffix, 'm');
+  },
   // scope via name and [is=name]
   applySimpleSelectorScope: function(selector, name, typeExtension) {
     var scoper = typeExtension ? '[is=' + name + ']' : name;
     if (selector.match(polyfillHostRe)) {
       selector = selector.replace(polyfillHostNoCombinator, scoper);
       return selector.replace(polyfillHostRe, scoper + ' ');
     } else {
       return scoper + ' ' + selector;
     }
   },
@@ skipping 18 matching lines @@
   },
   insertPolyfillHostInCssText: function(selector) {
     return selector.replace(hostRe, polyfillHost).replace(colonHostRe,
         polyfillHost);
   },
   propertiesFromRule: function(rule) {
     var properties = rule.style.cssText;
     // TODO(sorvell): Chrome cssom incorrectly removes quotes from the content
     // property. (https://code.google.com/p/chromium/issues/detail?id=247231)
     if (rule.style.content && !rule.style.content.match(/['"]+/)) {
-      properties = 'content: \'' + rule.style.content + '\';\n' +
+      properties = 'content: \'' + rule.style.content + '\';\n' + 
         rule.style.cssText.replace(/content:[^;]*;/g, '');
     }
     return properties;
   }
 };
 
 var hostRuleRe = /@host[^{]*{(([^}]*?{[^{]*?}[\s\S]*?)+)}/gim,
     selectorRe = /([^{]*)({[\s\S]*?})/gim,
     hostElementRe = /(.*)((?:\*)|(?:\:scope))(.*)/,
     hostFixableRe = /^[.\[:]/,
@@ skipping 65 matching lines @@
 if (window.ShadowDOMPolyfill) {
   addCssToDocument('style { display: none !important; }\n');
   var head = document.querySelector('head');
   head.insertBefore(getSheet(), head.childNodes[0]);
 }
 
 // exports
 scope.ShadowCSS = ShadowCSS;
 
 })(window.Platform);
-
 }