How to select extended custom elements

Question

I created a custom element following this example and now extended-item doesn't work anymore as a css selector though.

Before:

<style>
    extended-item {...}
</style>
<extend-item></extended-item>

After:

<style>
    ??? {...}
</style>
<div is="extended-item"></div>

I tried div:extended-item but it doesn't work. Any idea?

[EDIT]

Here is my example extended-item

<link rel="import" href="../libs/polymer/polymer.html">

<polymer-element name="extended-item" noscript extends="div">
    <template>
        <style>
            :host { ... }
        </style>
        ...
    </template>
</polymer-element>

Note that using noscript and extends together won't allow me to use <extended-item> syntax directly, but only the other <div is="extended-item"> syntax which doesn't seem to work with selectors. Registering the element this way is equivalent but will let me use both syntax, thus allowing the selector to work:

<link rel="import" href="../libs/polymer/polymer.html">

<polymer-element name="extended-item">
    <template>
        <style>
            :host { ... }
        </style>
        ...
    </template>
    <script>
        (function(){ Polymer('extended-item', {extends: 'div'}); })()
    </script>
</polymer-element>

Answer 1

This might be better as a comment than an answer, but I can't comment yet. You say extended-item doesn't work as a css selector - did you try the attribute selector [attr=value] ? In your case perhaps div[is="extended-item"] { /*styling*/ }