javascript - 如何选择扩展自定义元素

Question

我按照此 example 创建了一个自定义元素现在extended-item不过，它不再作为 css 选择器使用。

之前:

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

之后:

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

我试过div:extended-item但它不起作用。有什么想法吗？

[编辑]

这是我的示例 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>

请注意，使用 noscript和extends一起不允许我使用 <extended-item>直接语法，但仅限其他 <div is="extended-item">语法似乎不适用于选择器。以这种方式注册元素是等效的，但可以让我使用两种语法，从而允许选择器工作:

<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

作为评论可能比答案更好，但我还不能发表评论。您说 extended-item 不能用作 css 选择器 - 您是否尝试过属性选择器 [attr=value] ？在你的情况下，也许 div[is="extended-item"] {/*styling*/}