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尝试从主持人的影子中挑选元素。在这种情况下，这不是元素所在的位置。 <div class="item">元素仍然通过插入点并且是轻量级的一部分。它们需要使用::content进行样式设置。

＆＃13;

<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>

＆＃13;

覆盖Polymer扩展元素上的样式

1 个答案: