覆盖聚合物扩展元素上的样式

Question

我试图在选择元素时覆盖样式。

这适用于 Safari 和 Firefox。它不适用于 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>

例子：

<my-selector>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</my-selector>

Answer 1

试试：

::content .item.core-selected {
  ...
}

:host::shadow 尝试从宿主的 shadow dom 中挑选元素。在这种情况下，这不是元素所在的位置。 <div class="item"> 元素仍在通过插入点，并且是 light dom 的一部分。它们需要使用::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>