polymer - 覆盖 polymer 扩展元素上的样式

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>