Xstyle 1555

src/lib/annotations/annotations.html

@@ -273,7 +273,7 @@
 
     _localSubTree: function(node, host) {
       return (node === host) ? node.childNodes :
-         (node.lightChildren || node.childNodes);
+         (node._lightChildren || node.childNodes);
     },
 
     findAnnotatedNode: function(root, annote) {

src/lib/dom-api.html

@@ -203,7 +203,7 @@
       // a node is in a shadyRoot, is a shadyRoot, 
       // or has a lightParent
       _nodeIsInLogicalTree: function(node) {
-        return Boolean(node.lightParent || node._isShadyRoot ||
+        return Boolean(node._lightParent || node._isShadyRoot ||
           this._ownerShadyRootForNode(node) ||
           node.shadyRoot);
       },
@@ -230,12 +230,12 @@
       },
 
       _removeNodeFromHost: function(node) {
-        if (node.lightParent) {
+        if (node._lightParent) {
           var root = this._ownerShadyRootForNode(node);
           if (root) {
             root.host._elementRemove(node);
           }
-          this._removeLogicalInfo(node, node.lightParent);
+          this._removeLogicalInfo(node, node._lightParent);
         }
         this._removeOwnerShadyRoot(node);
       },
@@ -260,11 +260,11 @@
           var c$ = Array.prototype.slice.call(node.childNodes);
           for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
             children.splice(index++, 0, n);
-            n.lightParent = container;
+            n._lightParent = container;
           }
         } else {
           children.splice(index, 0, node);
-          node.lightParent = container;
+          node._lightParent = container;
         }
       },
 
@@ -274,11 +274,11 @@
       _removeLogicalInfo: function(node, container) {
         var children = factory(container).childNodes;
         var index = children.indexOf(node);
-        if ((index < 0) || (container !== node.lightParent)) {
+        if ((index < 0) || (container !== node._lightParent)) {
           throw Error('The node to be removed is not a child of this node');
         }
         children.splice(index, 1);
-        node.lightParent = null;
+        node._lightParent = null;
       },
 
       _removeOwnerShadyRoot: function(node) {
@@ -458,7 +458,7 @@
 
         parentNode: {
           get: function() {
-            return this.node.lightParent || 
+            return this.node._lightParent || 
               (this.node.__patched ? this.node._composedParent :
               this.node.parentNode);
           },
@@ -687,7 +687,7 @@
     Polymer.dom.flush = DomApi.prototype.flush;
 
     function getLightChildren(node) {
-      var children = node.lightChildren;
+      var children = node._lightChildren;
       return children ? children : node.childNodes;
     }
 
@@ -740,12 +740,12 @@
       // source of truth for the light children of the element. This element's
       // actual children will be treated as the rendered state once lightChildren
       // is populated.
-      if (!node.lightChildren) {
+      if (!node._lightChildren) {
         var c$ = Array.prototype.slice.call(node.childNodes);
         for (var i=0, l=c$.length, child; (i<l) && (child=c$[i]); i++) {
-          child.lightParent = child.lightParent || node;
+          child._lightParent = child._lightParent || node;
         }
-        node.lightChildren = c$;
+        node._lightChildren = c$;
       }
     }
 

src/lib/experimental/patch-dom.html

@@ -53,8 +53,8 @@
     }
     getComposedChildren(this.node);
     saveLightChildrenIfNeeded(this.node);
-    if (!this.node.lightParent) {
-      this.node.lightParent = this.node.parentNode;
+    if (!this.node._lightParent) {
+      this.node._lightParent = this.node.parentNode;
     }
     if (!this.node._composedParent) {
       this.node._composedParent = this.node.parentNode;

src/lib/style-defaults.html

@@ -39,7 +39,7 @@
           // an element in an import applied styles (e.g. custom-style)
           this._styles._rootStyleProperties = null;
           this._properties = styleProperties
-            .rootPropertiesFromStyles(this._styles);
+            .scopePropertiesFromStyles(this._styles);
         }
         return this._properties;
       },

src/lib/style-properties.html

@@ -127,10 +127,11 @@
             // case (2) variable
             var self = this;
             var fn = function(all, prefix, value, fallback) {
-              return prefix + (self.valueForProperty(props[value], props) ||
+              var propertyValue = (self.valueForProperty(props[value], props) ||
                 (props[fallback] ? 
                 self.valueForProperty(props[fallback], props) : 
                 fallback));
+              return prefix + (propertyValue || '');
             };
             property = property.replace(this.rx.VAR_MATCH, fn);
           }
@@ -196,25 +197,43 @@
         return {properties: props, key: o};
       },
 
-      // Test if a rule matches root crteria (:host or :root) and if so,
+      // Test if a rule matches scope crteria (* or :root) and if so,
       // collect any custom properties into `props`.
-      // these rules may already be shimmed and it's $ to reparse,
-      // so we check `is` value as a fallback
-      rootPropertiesFromStyles: function(styles) {
-        if (!styles._rootStyleProperties) {
-          var props = {}, self = this;
-          styleUtil.forRulesInStyles(styles, function(rule) {
-            if (!rule.propertyInfo) {
-              self.decorateRule(rule);
-            }
-            var s = rule.parsedSelector;
-            if (s === self.HOST || s === self.ROOT) {
+      scopePropertiesFromStyles: function(styles) {
+        if (!styles._scopeStyleProperties) {
+          styles._scopeStyleProperties = 
+            this.selectedPropertiesFromStyles(styles, this.SCOPE_SELECTORS);
+        }
+        return styles._scopeStyleProperties;
+      },
+
+      // Test if a rule matches host crteria (:host) and if so,
+      // collect any custom properties into `props`.
+      //
+      // TODO(sorvell): this should change to collecting properties from any
+      // :host(...) and then matching these against self.
+      hostPropertiesFromStyles: function(styles) {
+        if (!styles._hostStyleProperties) {
+          styles._hostStyleProperties = 
+            this.selectedPropertiesFromStyles(styles, this.HOST_SELECTORS);
+        }
+        return styles._hostStyleProperties;
+      },
+
+      selectedPropertiesFromStyles: function(styles, selectors) {
+        var props = {}, self = this;
+        styleUtil.forRulesInStyles(styles, function(rule) {
+          if (!rule.propertyInfo) {
+            self.decorateRule(rule);
+          }
+          for (var i=0; i < selectors.length; i++) {
+            if (rule.parsedSelector === selectors[i]) {
               self.collectProperties(rule, props);
+              return;
             }
-          });
-          styles._rootStyleProperties = props;
-        }
-        return styles._rootStyleProperties;
+          }
+        });
+        return props;
       },
 
       transformStyles: function(element, properties, scopeSelector) {
@@ -304,15 +323,20 @@
       rx: {
         VAR_ASSIGN: /(?:^|;\s*)(--[^\:;]*?):\s*?(?:([^;{]*?)|{([^}]*)})(?=;)/gim,
         MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\);?/im, 
-        VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*([^,)]*)[\s]*?\)/gim,
+        // note, this supports:
+        // var(--a)
+        // var(--a, --b)
+        // var(--a, fallback-literal)
+        // var(--a, fallback-literal(with-one-nested-parens))
+        VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gim,
         VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gim,
         BRACKETED: /\{[^}]*\}/g,
         HOST_PREFIX: '(?:^|[^.])',
         HOST_SUFFIX: '($|[.:[\\s>+~])'
       },
 
-      HOST: ':host',
-      ROOT: ':root',
+      HOST_SELECTORS: [':host'],
+      SCOPE_SELECTORS: [':root'],
       XSCOPE_NAME: 'x-scope'
 
     };

src/mini/shady.html

@@ -46,7 +46,7 @@
           // removed from document by shadyDOM distribution 
           // so we ensure this here
           if (!this.dataHost) {
-            upgradeLightChildren(this.lightChildren);
+            upgradeLightChildren(this._lightChildren);
           }
         }
       },
@@ -236,7 +236,7 @@
         this._updateChildNodes(this, this._composeNode(this));
         var p$ = this.shadyRoot._insertionPoints;
         for (var i=0, l=p$.length, p, parent; (i<l) && (p=p$[i]); i++) {
-          parent = p.lightParent || p.parentNode;
+          parent = p._lightParent || p.parentNode;
           if (!parent._useContent && (parent !== this) &&
             (parent !== this.shadyRoot)) {
             this._updateChildNodes(parent, this._composeNode(parent));
@@ -356,7 +356,7 @@
 
     // dirty a shadyRoot if a change may trigger reprojection!
     function maybeRedistributeParent(content, host) {
-      var parent = content.lightParent;
+      var parent = content._lightParent;
       if (parent && parent.shadyRoot &&
           hasInsertionPoint(parent.shadyRoot) && 
           parent.shadyRoot._distributionClean) {

src/standard/x-styling.html

@@ -114,12 +114,15 @@
         }
         // start with scope style properties
         var props = Object.create(scope._styleProperties);
+        // mixin own host properties (lower specifity than scope props)
+        this.mixin(props, propertyUtils.hostPropertiesFromStyles(this._styles));
         // mixin properties matching this element in scope
         scopeProps = scopeProps || 
           propertyUtils.propertyDataFromStyles(scope._styles, this).properties;
         this.mixin(props, scopeProps);
         // finally mixin properties inherent to this element
-        this.mixin(props, propertyUtils.rootPropertiesFromStyles(this._styles));
+        this.mixin(props, 
+          propertyUtils.scopePropertiesFromStyles(this._styles));
         this.mixin(props, this.customStyle);
         // reify properties (note: only does own properties)
         propertyUtils.reify(props);

test/unit/shady.html

@@ -135,14 +135,14 @@
     assert.strictEqual(getComposedHTML(host),
         '<x-content-test id="p">a: <a></a>b: <b></b></x-content-test>');
 
-    assertArrayEqual(host.lightChildren, [a]);
-    assert.strictEqual(a.lightParent, host);
-    assertArrayEqual(host.shadyRoot.lightChildren, [p]);
-    assert.strictEqual(p.lightParent, host.shadyRoot);
-    assertArrayEqual(p.lightChildren, [b, content]);
-    assert.strictEqual(b.lightParent, p);
-    assert.strictEqual(content.lightParent, p);
-    assertArrayEqual(p.shadyRoot.lightChildren,
+    assertArrayEqual(host._lightChildren, [a]);
+    assert.strictEqual(a._lightParent, host);
+    assertArrayEqual(host.shadyRoot._lightChildren, [p]);
+    assert.strictEqual(p._lightParent, host.shadyRoot);
+    assertArrayEqual(p._lightChildren, [b, content]);
+    assert.strictEqual(b._lightParent, p);
+    assert.strictEqual(content._lightParent, p);
+    assertArrayEqual(p.shadyRoot._lightChildren,
         [textNodeA, contentA, textNodeB, contentB]);
   }
 
@@ -165,7 +165,7 @@
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '<a></a>');
 
-    host.lightChildren = [];
+    host._lightChildren = [];
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), 'fallback');
   });
@@ -180,11 +180,11 @@
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '<a>Hello</a><b>after</b>');
 
-    host.shadyRoot.lightChildren[1].textContent = '';
+    host.shadyRoot._lightChildren[1].textContent = '';
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '<a>Hello</a><b></b>');
 
-    host.shadyRoot.lightChildren = [];
+    host.shadyRoot._lightChildren = [];
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '');
   });
@@ -203,11 +203,11 @@
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '<b></b>');
 
-    host.shadyRoot.firstChild.lightChildren = [];
+    host.shadyRoot.firstChild._lightChildren = [];
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '');
 
-    host.shadyRoot.lightChildren = [];
+    host.shadyRoot._lightChildren = [];
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '');
   });
@@ -225,7 +225,7 @@
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '<a></a>');
 
-    host.lightChildren = [];
+    host._lightChildren = [];
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), 'fallback');
   });
@@ -265,11 +265,11 @@
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '<a>Hello</a><b></b>');
 
-    host.shadyRoot.lightChildren.splice(1, 1); // remove b
+    host.shadyRoot._lightChildren.splice(1, 1); // remove b
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
 
-    host.shadyRoot.lightChildren = []; // remove a
+    host.shadyRoot._lightChildren = []; // remove a
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '');
   });
@@ -368,7 +368,7 @@
     assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
 
     var b = document.createElement('b');
-    host.lightChildren[0] = b;
+    host._lightChildren[0] = b;
     distributeContentNow(host);
     assert.strictEqual(getComposedHTML(host), '<b></b>');
   });
@@ -437,12 +437,12 @@
 });
 
 function syncLightDOM(n) {
-  if (n.lightChildren) {
+  if (n._lightChildren) {
     var c$ = n.__patched ? n._composedChildren || [] : Array.prototype.slice.call(n.childNodes);
     c$.forEach(function(c) {
-      if (n.lightChildren.indexOf(c) < 0) {
-        c.lightParent = n;
-        n.lightChildren.push(c);
+      if (n._lightChildren.indexOf(c) < 0) {
+        c._lightParent = n;
+        n._lightChildren.push(c);
       }
     });
   }