css - ネイティブの Shadow DOM 要素のスタイリング

Question

私は常に、Shadow DOM 要素のスタイリングにアクセスしてオーバーライドできると信じていました。使用できる Webkit 固有のセレクターを定義する html5rocks に関する記事を見ました: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: blue;
  width: 10px;
  height: 40px;
}

ただし、これを試してみると、期待どおりに機能しません。スタイル プロパティの一部をオーバーライドできないように見えます。例: 高さと幅 ただし、Webkit の外観を設定すると、ボタンのように見えなくなります。

これは本当ですか？

私がやりたいことは、ハンドルとトラックが異なる色になるようにレンジ スライダーのスタイルを設定することです。

ここに簡単なデモがあります: http://jsfiddle.net/sidonaldson/dCK​​d3 /ボタンを非表示にすることはできますが、背景色を設定すると元に戻ります!