Question

Polymer list-item的文档指定以下自定义属性：

- 专注于纸张项目 - 在将Mixin应用于：聚焦纸张项目之前{}

我不确定{}是否意味着没有默认或“我们没有告诉你。我之所以说我在所选项目的＃shadow-root样式中找到了以下内容：< / p>

:host(:focus):before, .paper-item:focus:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

    background: currentColor;
    content: '';
    opacity: 0.12;
    pointer-events: none;;
}

，这在paper-item-shared-style.html

中

      :host(:focus):before, .paper-item:focus:before {
    @apply(--layout-fit);

    background: currentColor;
    content: '';
    opacity: var(--dark-divider-opacity);
    pointer-events: none;

    @apply(--paper-item-focused-before);
  }

所以似乎内容正在被定义为 - 纸张项目 - 之前。无论如何，如果我在检查器中用我想要的颜色替换currentColor，它会做我想要的。我认为改变它的永久方法是定义--paper-item-focused-before。我将此添加到index.html中的css：

  <style is="custom-style">
  :host {
    --paper-item-focused-before: {
      background-color: #293040
    }
  }
...
</style>

它不起作用。我是否必须使用其他选择器或放在不同的位置？

Answer 1

@ a1626的答案是什么修复它。我之前尝试过：root，但它是组件指定的css。当我在index.html中将它放入样式时它可以工作：

<style is="custom-style">
  :root {
    --paper-item-focused-before: {
      background-color: #293040
    }
}
...
</style>

这是我在＃shadow-root

中的检查器中得到的

:host(:focus):before, .paper-item:focus:before {
  position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

    background: currentColor;
    content: '';
    opacity: 0.12;
    pointer-events: none;background-color: #293040;
}

这支持@ a1626答案 - 以纸张为重点的 - 之前是空的。 @ a1626，如果你选择回答这个问题，我会接受我的。

如何使聚合物自定义属性工作

1 个答案: