Update shadow and shadow-style features.

src/features/more/shadow-styler.html

@@ -9,64 +9,75 @@
 -->
 <script>
 
-/* Configures elemnent styles to stamped into ShadowDOM.
+  using('Base', function(Base) {
 
- NOTE: using this feature will currently change all templates to be configured
- to be styled for ShadowDOM.
+    /* Configures elemnent styles to stamped into ShadowDOM.
 
- * If an element has a template, style is placed in the template and element
-   name is replaced with `:host`.
- * If an element does not have a template, style remains in place, but rules
-   are prepended with `html /deep/`.
+     NOTE: using this feature will currently change all templates to be configured
+     to be styled for ShadowDOM.
 
-*/
-(function() {
+     * If an element has a template, style is placed in the template and element
+       name is replaced with `:host`.
+     * If an element does not have a template, style remains in place, but rules
+       are prepended with `html /deep/`.
 
-  XStyles = window.XStyles || {};
+    */
+    XStyles = window.XStyles || {};
 
-  Base.addFeature({
+    var originalBootTemplate = Base._bootTemplate;
 
-    register: function(prototype) {
-      var template = prototype._template;
-      var hook = template ||
-        (document._currentScript || document.currentScript);
-      var styles = [];
-      var prev = hook.previousElementSibling;
-      if (prev && prev.localName === 'style') {
-        styles.push(prev);
-      }
-      styles = styles.concat(XStyles[prototype.name] || []);
-      prototype._styles = styles;
-      if (!styles.length) {
-        return;
-      }
-      // use :host or /deep/ depending on if the element has a template and
-      // therefore will have a shadowRoot.
-      var selector = template ? ':host' : 'html /deep/ $&';
-      this._processStyles(prototype._styles, prototype.name, selector);
-      if (template) {
-        this.insertStyles(prototype._styles, template.content);
-      }
-    },
+    Base.addFeature({
 
-    _processStyles: function(styles, name, selector) {
-      var re = new RegExp(name, 'g');
-      for (var i=0, l=styles.length, style; (i<l) && (style=styles[i]); i++) {
-        style.textContent = style.textContent.replace(re, selector);
-      }
-    },
+      _bootTemplate: function() {
+        originalBootTemplate.call(this);
+        this._shadowStylerRegister();
+      },
+
+      _shadowStylerRegister: function() {
+        var template = this._template;
+        var tag = this.tag || this.name;
+        var hook = template ||
+          (document._currentScript || document.currentScript);
+        var styles = [];
+        var prev = hook.previousElementSibling;
+        if (prev && prev.localName === 'style') {
+          styles.push(prev);
+        }
+        styles = styles.concat(XStyles[tag] || []);
+        this._styles = styles;
+        if (!styles.length) {
+          return;
+        }
+        if (!this._template) {
+          var template = this._template = document.createElement('template');
+          this._template.content.appendChild(document.createElement('content'));
+        }
 
-    insertStyles: function(styles, root) {
-      var ref = root.firstChild;
-      for (var i=0, l=styles.length, style, n; (i<l) && (style=styles[i]); i++) {
-        n = document.createElement('style');
-        n.textContent = style.textContent;
-        ref = root.insertBefore(n,
-          ref.nextElementSibling);
+        var selector = ':host';
+        this._processStyles(this._styles, tag, selector);
+        if (template) {
+          this.insertStyles(this._styles, template.content);
+        }
+      },
+
+      _processStyles: function(styles, name, selector) {
+        var re = new RegExp(name, 'g');
+        for (var i=0, l=styles.length, style; (i<l) && (style=styles[i]); i++) {
+          style.textContent = style.textContent.replace(re, selector);
+        }
+      },
+
+      insertStyles: function(styles, root) {
+        var ref = root.firstChild;
+        for (var i=0, l=styles.length, style, n; (i<l) && (style=styles[i]); i++) {
+          n = document.createElement('style');
+          n.textContent = style.textContent;
+          ref = root.insertBefore(n,
+            ref.nextElementSibling);
+        }
       }
-    }
 
-  });
+    });
 
-})();
+  });
 </script>

src/features/more/shadow.html

@@ -8,11 +8,78 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <script>
+
+  using('Base', function(Base) {
 
-  Base.addFeature({
-    createShadow: function(template) {
-      this.root = this.createShadowRoot();
-    }
-  });
+    /**
+      Implements `shadyRoot` compatible dom scoping using native ShadowDOM.
+    */
+
+    Base.addFeature({
+	    poolContent: function() {
+        this._useContent = this._useContent || Boolean(this._template);
+        this.hasShadyRoot = this.hasShadowRoot = this._useContent;
+	    },
+
+	    // this should happen only 1x.
+	    distributeContent: function() {
+        // compose "clients"
+        var c$ = this._getDistributionClients();
+        for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
+          c.distributeContent();
+        }
+        // compose self
+        if (this._useContent) {
+          this._createShadowRoot();
+        } else if (this.root !== this) {
+          this.appendChild(this.root);
+          this.root = this;
+        }
+      },
+
+	    addLightChild: function(node, opt_index) {
+	      if (opt_index === undefined) {
+          this.appendChild(node);
+        } else {
+        	this.insertBefore(node, this.childNodes[opt_index]);
+        }
+	    },
+
+	    removeLightChild: function(node) {
+	    	node.parentNode.removeChild(node);
+	    },
+
+	    querySelectorLocal: function(selector) {
+	      return this.root.querySelectorAll(selector);
+	    },
+
+	    queryLocal: function(matcher) {
+	      var c$ = this.children;
+	      var list = [];
+	      for (var i=0, l=c$.length, c; (i<l) && (c=c$[i]); i++) {
+          this._queryLocal(c, matcher, list);
+	      }
+	      return list;
+	    },
+
+	    _queryLocal: function(node, matcher, list) {
+	      if (matcher(node)) {
+	        list.push(node);
+	      }
+	      var c$ = node.children;
+	      for (var i=0, l=c$.length, c; (i<l) && (c=c$[i]); i++) {
+	         this._queryLocal(c, matcher, list);
+	      }
+	    },
+
+ 	    _createShadowRoot: function() {
+	    	var root = this.createShadowRoot();
+	      root.appendChild(this.root);
+	      this.root = root;
+	    }
+
+  	});
+
+	});
 
 </script>