diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
index 8851e07..46b8c8d 100644
--- a/src/ShadowCSS.js
+++ b/src/ShadowCSS.js
@@ -89,6 +89,19 @@
   becomes:
 
     x-foo [pseudo=x-special] { ... }
+
+  * ::part(): These rules are converted to rules that take advantage of the
+  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] { ... }    
   
   Unaddressed ShadowDOM styling features:
   
@@ -372,7 +385,9 @@ var ShadowCSS = {
   convertScopedStyles: function(styles, name) {
     var cssText = stylesToCssText(styles).replace(hostRuleRe, '');
     cssText = this.insertPolyfillHostInCssText(cssText);
+    cssText = this.convertColonHost(cssText);
     cssText = this.convertPseudos(cssText);
+    cssText = this.convertParts(cssText);
     var rules = cssToRules(cssText);
     cssText = this.scopeRules(rules, name);
     return cssText;
@@ -380,6 +395,18 @@ var ShadowCSS = {
   convertPseudos: function(cssText) {
     return cssText.replace(cssPseudoRe, ' [pseudo=$1]');
   },
+  convertParts: function(cssText) {
+    return cssText.replace(cssPartRe, ' [part=$1]');
+  },
+  convertColonHost: function(cssText) {
+    /*
+    var is = '[is=' + name + ']';
+    var r = name + '$1$2, $1 ' + name + '$2, ' +
+      is + '$1$2, $1' + is + '$2 ';
+    */
+    var r = '$1$2$3, $2 $1$3';
+    return cssText.replace(cssColonHostRe, r);
+  },
   // change a selector like 'div' to 'name div'
   scopeRules: function(cssRules, name) {
     var cssText = '';
@@ -469,6 +496,9 @@ var hostRuleRe = /@host[^{]*{(([^}]*?{[^{]*?}[\s\S]*?)+)}/gim,
     cssPolyfillRuleCommentRe = /\/\*\s@polyfill-rule([^*]*\*+([^/*][^*]*\*+)*)\//gim,
     cssPolyfillUnscopedRuleCommentRe = /\/\*\s@polyfill-unscoped-rule([^*]*\*+([^/*][^*]*\*+)*)\//gim,
     cssPseudoRe = /::(x-[^\s{,(]*)/gim,
+    cssPartRe = /::part\(([^)]*)\)/gim,
+    // note: :host pre-processed to -host.
+    cssColonHostRe = /(-host)(?:\(([^)]*)\))?([^,{]*)/gim,
     selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$',
     hostRe = /@host/gim,
     colonHostRe = /\:host/gim,
diff --git a/test/html/styling/colon-host.html b/test/html/styling/colon-host.html
new file mode 100644
index 0000000..e50778f
--- /dev/null
+++ b/test/html/styling/colon-host.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+<html>
+<head>
+  <meta name="viewport" content="initial-scale=1.0">
+  <title>Using :host styling</title>
+  <script src="../../../platform.js"></script>
+  <script src="register.js"></script>
+  <script src="../../../../tools/test/htmltest.js"></script>
+  <script src="../../../node_modules/chai/chai.js"></script>
+</head>
+<body>
+  <script>
+    
+  </script>
+  <template id="x-foo">
+    <style>
+      :host {
+        display: block;
+        background: red;
+      }
+
+      :host(.foo) {
+        background: black;
+        color: white;
+      }
+    </style>
+    <div>background</div>
+  </template>
+  <template id="x-bar">
+    <style>
+      :host {
+        color: white;
+      }
+    </style>
+    <shadow></shadow>
+    <div>white text</div>
+  </template>
+
+  <template id="x-zot">
+    <style>
+      :host {
+        border: 5px solid orange;
+      }
+    </style>
+    <shadow></shadow>
+    <div>orange border & gray background</div>
+  </template>
+
+  <template id="x-scope">
+    <style>
+      :host {
+        display: block;
+        background: red;
+      }
+      
+      :host(.foo) {
+        background: black;
+        color: white;
+      }
+    </style>
+    <div>background</div>
+  </template>
+  <template id="x-button">
+    <style>
+      :host {
+        background: green;
+      }
+    </style>
+    <content></content>
+  </template>
+
+  <template id="x-zim">
+    <style>
+      :host {
+        padding: 20px;
+        border-top-color: brown;
+      }
+    </style>
+    <shadow></shadow>
+    <div>padding: 20px</div>
+  </template>
+
+  <template id="x-zim2">
+    <style>
+      :host {
+        padding: 20px;
+      }
+    </style>
+    <div>padding: 20px</div>
+  </template>
+  
+  <script>
+    XFoo = register('x-foo', '', HTMLElement.prototype, ['x-foo']);
+    XBar = register('x-bar', 'x-foo', XFoo.prototype, ['x-foo', 'x-bar']);
+    XBar2 = register('x-bar2', 'x-foo', XFoo.prototype, ['x-foo']);
+    XZot = register('x-zot', 'x-bar', XBar.prototype, ['x-foo', 'x-bar', 'x-zot']);
+    XZim = register('x-zim', 'x-zot', XZot.prototype, ['x-foo', 'x-bar', 'x-zot', 'x-zim']);
+    XZim2 = register('x-zim2', 'x-zot', XZot.prototype, ['x-foo', 'x-bar', 'x-zot', 'x-zim2']);
+    register('x-scope', '', HTMLElement.prototype, ['x-scope']);
+    register('x-button', 'button', HTMLButtonElement.prototype, ['x-button']);
+  </script>
+  
+  <h4>Expected: red background</h4>
+  <x-foo></x-foo>
+  
+  <h4>Expected: red background</h4>
+  <x-scope></x-scope>
+
+  <h4>Expected: green background</h4>
+  <button is="x-button">green</button>
+  
+  <h4>Expected: black background</h4>
+  <x-foo class="foo"></x-foo>
+  
+  <h4>Expected: black background</h4>
+  <x-scope class="foo"></x-scope>
+  
+  <h4>Expected: red background with white text</h4>
+  <x-bar></x-bar>
+
+  <h4>Expected: red background with white text</h4>
+  <x-bar2></x-bar2>
+  
+  <h4>Expected: red background with black text and orange border</h4>
+  <x-zot></x-zot>
+  
+  <h4>Expected: red background with black text and orange border and 20px padding</h4>
+  <x-zim></x-zim>
+
+  <h4>Expected: 20px padding</h4>
+  <x-zim2></x-zim2>
+  
+  <script>
+    document.addEventListener('WebComponentsReady', function() {
+      var foo = document.querySelector('x-foo');
+      chai.assert.equal(getComputedStyle(foo).backgroundColor, 'rgb(255, 0, 0)',
+        ':host styles matching * are applied (backgroundColor)');
+      
+      var foo2 = document.querySelector('x-foo.foo');
+      //chai.assert.equal(getComputedStyle(foo2).backgroundColor, 'rgb(0, 0, 0)',
+      //  ':host styles are conditionally applied (backgroundColor)');  
+
+      var scope = document.querySelector('x-scope');
+      chai.assert.equal(getComputedStyle(scope).backgroundColor, 'rgb(255, 0, 0)',
+        ':host styles matching :scope  are applied (backgroundColor)');
+        
+      var scope2 = document.querySelector('x-scope.foo');
+      //chai.assert.equal(getComputedStyle(scope2).backgroundColor, 'rgb(0, 0, 0)',
+      //  ':host styles matching :scope are conditionally applied (backgroundColor)');  
+      
+      var bar = document.querySelector('x-bar');
+      var barStyle = getComputedStyle(bar);
+      chai.assert.equal(barStyle.backgroundColor, 'rgb(255, 0, 0)', 
+        ':host styles are inherited (backgroundColor)');
+      chai.assert.equal(barStyle.color, 'rgb(255, 255, 255)',
+        ':host styles are combined with inherited :host styles (color)');
+
+      var bar2 = document.querySelector('x-bar2');
+      var bar2Style = getComputedStyle(bar2);
+      chai.assert.equal(bar2Style.backgroundColor, 'rgb(255, 0, 0)', 
+        ':host styles are inherited (backgroundColor)');
+
+      var zot = document.querySelector('x-zot');
+      var zotStyle = getComputedStyle(zot);
+      chai.assert.equal(zotStyle.backgroundColor, 'rgb(255, 0, 0)', 
+        ':host styles are inherited (backgroundColor)');
+      chai.assert.equal(zotStyle.borderTopColor, 'rgb(255, 165, 0)', 
+        ':host styles are combined with inherited :host styles (borderTopColor)');
+      chai.assert.equal(zotStyle.color, 'rgb(255, 255, 255)',
+        ':host styles are applied to given selector (color)');
+        
+      var zim = document.querySelector('x-zim');
+      var zimStyle = getComputedStyle(zim);
+      chai.assert.equal(zimStyle.backgroundColor, 'rgb(255, 0, 0)', 
+        ':host styles are inherited (backgroundColor)');
+      
+      chai.assert.equal(zimStyle.borderTopColor, 'rgb(165, 42, 42)', 
+        ':host styles are combined with inherited :host styles (borderTopColor)');
+      chai.assert.equal(zimStyle.borderBottomColor, 'rgb(255, 165, 0)', 
+        ':host styles are combined with inherited :host styles (borderBottomColor)');
+      chai.assert.equal(zimStyle.color, 'rgb(255, 255, 255)',
+        ':host styles are applied to given selector (color)');
+      chai.assert.equal(zimStyle.paddingTop, '20px',
+        ':host styles are loaded via external sheet in import (paddingTop)');
+      chai.assert.equal(zimStyle.paddingLeft, '20px',
+        ':host styles are loaded via external sheet in import (paddingLeft)');
+      zim.offsetHeight;
+
+      var zim2 = document.querySelector('x-zim2');
+      var zimStyle2 = getComputedStyle(zim2);
+      chai.assert.equal(zimStyle2.borderTopColor, 'rgb(0, 0, 0)', 
+        ':host styles are not combined without <shadow> (borderTopColor)');
+      chai.assert.equal(zimStyle2.borderBottomColor, 'rgb(0, 0, 0)', 
+        ':host styles are not combined without <shadow> (borderBottomColor)');
+      chai.assert.equal(zimStyle2.paddingTop, '20px',
+        ':host styles are loaded via external sheet in import (paddingTop)');
+      chai.assert.equal(zimStyle2.paddingLeft, '20px',
+        ':host styles are loaded via external sheet in import (paddingLeft)');
+
+      done();
+
+
+    });
+  </script>
+</body>
+</html>
diff --git a/test/html/styling/pseudos.html b/test/html/styling/pseudos.html
index 415b822..d1d0bc4 100644
--- a/test/html/styling/pseudos.html
+++ b/test/html/styling/pseudos.html
@@ -6,7 +6,7 @@
 -->
 <html>
 <head>
-  <title>Using pseudo styling</title>
+  <title>Using pseudo/part styling</title>
   <script src="../../../platform.js"></script>
   <script src="register.js"></script>
   <script src="../../../../tools/test/htmltest.js"></script>
@@ -17,6 +17,7 @@
 
   <template id="x-inner">
     <div id="special" pseudo="x-special">Special</div>
+    <div id="special2" part="party">Special</div>
   </template>
 
   <template id="x-test">
@@ -25,9 +26,17 @@
         background: yellow;
       }
 
+      x-inner::part(party) {
+        color: red;
+      }
+
       .two::x-special {
         background: green;
       }
+
+      .two::part(party) {
+        color: white;
+      }
     </style>
     <x-inner id="inner1"></x-inner>
     <x-inner id="inner2" class="two"></x-inner>
@@ -44,11 +53,19 @@
       var special2 = test.shadowRoot.querySelector('#inner2').shadowRoot
           .querySelector('#special');
 
+      var special2_1 = test.shadowRoot.querySelector('#inner1').shadowRoot
+          .querySelector('#special2');
+      var special2_2 = test.shadowRoot.querySelector('#inner2').shadowRoot
+          .querySelector('#special2');
+
       chai.assert.equal(getComputedStyle(special1).backgroundColor, 'rgb(255, 255, 0)',
         'pseudos styling is applied');
-
       chai.assert.equal(getComputedStyle(special2).backgroundColor, 'rgb(0, 128, 0)',
         'pseudos styling is applied');
+      chai.assert.equal(getComputedStyle(special2_1).color, 'rgb(255, 0, 0)',
+        'part styling is applied');
+      chai.assert.equal(getComputedStyle(special2_2).color, 'rgb(255, 255, 255)',
+        'part styling is applied');
       done();
     });
   </script>
