我搜索了我的问题，发现了this
但是，接受的解决方案对我不起作用但是我无法发表评论，因为我只有6个声望 - .-
所以情况是，我想使用纸张列表框中的Polymer框架中的paper-item，但是当你通过点击选择一个项目时，背景会变为灰色...文档和我链接的问题的答案abvoe建议覆盖--paper-item-selected / --paper-item-focus mixin，但这对我不起作用
我的代码：
<link rel="import" href="../../../external/Polymer/bower_components/polymer/polymer.html">
<dom-module id="cit-literal-item">
<template>
<!-- scoped CSS for this element -->
<style is="custom-style">
.spacer {
@apply(--layout-flex);
}
paper-item {
--paper-item-selected: {
background-color: #FFFFFF;
};
--paper-item-focused: {
background-color: #FFFFFF;
};
}
</style>
<paper-item>Test</paper-item>
</template>
</dom-module>
主要文件代码：
...
<!-- Polymer custom elements -->
<link rel="import" href="lib/internal/dom-modules/literals/cit-literal-item.html">
...
<body>
<paper-listbox>
<cit-literal-item></cit-literal-item>
<cit-literal-item></cit-literal-item>
</paper-listbox>
</body>
我找到了“解决方案”！我必须覆盖的属性称为--paper-item-focused-before
我查看了<paper-item>的源代码，并在shared-styles.html中找到了它
:host(.iron-selected) {
font-weight: var(--paper-item-selected-weight, bold);
@apply(--paper-item-selected);
}
:host([disabled]) {
color: var(--paper-item-disabled-color, --disabled-text-color);
@apply(--paper-item-disabled);
}
:host(:focus) {
position: relative;
outline: 0;
@apply(--paper-item-focused);
}
:host(:focus):before {
@apply(--layout-fit);
background: currentColor;
content: '';
opacity: var(--dark-divider-opacity);
pointer-events: none;
@apply(--paper-item-focused-before);
}
可以看出，默认情况下唯一应用颜色的mixin是--paper-item-focused-before，它将样式应用于:before的<paper-item>伪元素。
- 纸张项目重点 - 之前：{背景：透明; };