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*/ }

如何选择扩展自定义元素

1 个答案: