iron-list 中的 Polymer paper-icon-item：焦点和切换

Question

我刚刚更新到最新版本的 Polymer，paper-icon-item 的行为似乎发生了变化。根据版本 1.0.3 的源文档，paper-icon-item 现在符合 iron-control-state 和 iron-button-state 行为。

我有两个问题：每当我以这些方式与元素交互时，我现在都会将 "focused" 和 "pressed" 添加到我的元素中。这很好，但是，我的元素中添加了一个烦人的焦点边框，我不知道如何使用 CSS.

来消除它的样式

我可以在 CSS 堆栈中的什么位置访问焦点边框？

我的另一个问题是元素（在 iron-list 内）现在似乎永久处于切换模式，因此即使我没有明确设置切换，单击所选项目也会取消选择它任何地方的行为。根据 Polymer 文档，toggles 行为应该设置为 false 作为默认值。

任何人都可以对这些行为提供一些见解吗？我需要单元格不切换且没有焦点边框。

Answer 1

是的，我在我的项目中遇到了同样的问题。由于我更新了所有聚合物元素，我的自定义元素将不再显示。我希望聚合物团队尽快解决这个问题...

Answer 2

您可以使用 :focus 或 :active CSS 属性。 iron-list 的演示使用了这个：

.item:focus {
  outline: 0;
  border-color: #666;
}

如果您使用的是 paper-menu，您可以使用这些混入：

--paper-menu-selected-item
--paper-menu-focused-item

阅读文档了解更多信息。

尽管您可能会觉得这些很烦人，但请尝试在不使用鼠标而只使用键盘的情况下使用您的应用程序。对于可访问性，您可能不应该隐藏它们。

Polymer paper-icon-item inside iron-list: focus and toggle