* polymer-shadow.html: loads polymer and configures to compose with s…

…hadowDOM.

* improve shadow styling by supporting :host(...)

polymer-shadow.html

@@ -0,0 +1,14 @@
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="polymer.html">
+<link rel="import" href="src/features/more/shadow.html">
+<link rel="import" href="src/features/more/shadow-styler.html">
+<link rel="import" href="src/features/more/shadow-layout.html">

src/features/more/shadow-layout.html

@@ -263,9 +263,38 @@
 }
 
 html /deep/ [scroll] {
+  -webkit-overflow-scrolling: touch;
   overflow: auto;
 }
 
+html /deep/ [fixed-top] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+html /deep/ [fixed-right] {
+  position: fixed;
+  top: 0;
+  right: 0;
+  botttom: 0;
+}
+
+html /deep/ [fixed-bottom] {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+html /deep/ [fixed-left] {
+  position: fixed;
+  top: 0;
+  botttom: 0;
+  left: 0;
+}
+
 /*******************************
             Other
 *******************************/

src/features/more/shadow-styler.html

@@ -53,20 +53,32 @@
           this._template.content.appendChild(document.createElement('content'));
         }
 
-        var selector = ':host';
-        this._processStyles(this._styles, tag, selector);
+        this._processStyles(this._styles, tag);
         if (template) {
           this.insertStyles(this._styles, template.content);
         }
       },
 
-      _processStyles: function(styles, name, selector) {
-        var re = new RegExp(name, 'g');
+      _processStyles: function(styles, name) {
         for (var i=0, l=styles.length, style; (i<l) && (style=styles[i]); i++) {
-          style.textContent = style.textContent.replace(re, selector);
+          this._processStyle(style, name);
         }
       },
 
+      _processStyle: function(style, name) {
+        var text = style.textContent;
+        var host = ':host';
+        // replace any selectors like `name ` with `:host `
+        var re = new RegExp(name + '[\\s]+', 'g');
+        text = text.replace(re, host + ' ');
+        // replace any compound selectors name.foo with :host(.foo)
+        var compound = new RegExp(name + '([^\\,\\s\\{]*)', 'g');
+        text = text.replace(compound, function(match, part) {
+          return host + '(' + part + ')';
+        });
+        style.textContent = text;
+      },
+
       insertStyles: function(styles, root) {
         var ref = root.firstChild;
         for (var i=0, l=styles.length, style, n; (i<l) && (style=styles[i]); i++) {