Override Style on Polymer extended element - polymer

Question

Im trying to override the styling when an element is selected.
This works on Safari and Firefox. It does not work on Chrome 38.
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-selector/core-selector.html">
<polymer-element name="my-selector" extends="core-selector">
<template>
<style>
:host::shadow .item.core-selected{
background: blue;
}
</style>
<shadow></shadow>
</template>
<script>
Polymer('my-selector');
</script>
</polymer-element>
Example:
<my-selector>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</my-selector>

Answer 1

Try:
::content .item.core-selected {
...
}
:host::shadow try to picks elements out of the host's shadow dom. In this case, this is not where the elements are. The <div class="item"> elements are still going through an insertion point and are part of light dom. They need to be styled with ::content.
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/core-selector/core-selector.html">
<polymer-element name="my-selector" extends="core-selector">
<template>
<style>
::content .item.core-selected {
background: blue;
color: white;
}
</style>
<shadow></shadow>
</template>
<script>
Polymer('my-selector');
</script>
</polymer-element>
<my-selector selected="0">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</my-selector>