Selected index can be incorrect when some children come from distributed content

[miztroh-zz]

In the following example, items distributed into the custom element get indexed after the element's local DOM instead of before. If I click the distributed child, the selected value would be 3 instead of 0. I would expect the value to be 0 since the insertion point comes before all the local DOM items.

<dom-module id="my-selector">
    <template>
        <iron-selector>
            <content select=".selectable"></content>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        <iron-selector>
    </template>
    <script>
        Polymer({is: 'my-selector'});
    </script>
</dom-module>
<my-selector>
    <div class="selectable">0</div>
</my-selector>

[bicknellr]

This seems to be resolved: demo. Note the duplicated styling for .iron-selected; you'll probably need to expose some CSS variables / a mixin so items in the iron-selector that are in the local DOM of your element are still able to be styled from the outside.