聚合物核心项目选择问题

Question

代码可以在这里找到：https://ele.io/MikeFielden/cw-style-demo-menu

我在这里想要实现的是有一个左导航组件，我可以在许多页面上包含它，标签 selected 上有一个 attribute，我可以用它来关闭和select对应core-item。

我一辈子都无法让它工作。我想我对从 js 中刺穿阴影 DOM 感到困惑？不太确定最好的方法是什么。

Answer 1

您的代码存在一些问题。

整个菜单模板应该如下所示（注意 paper-item 上 selected 属性的设置）：

<core-menu id="nav">
  <template repeat='{{node in nodes}}'>
    <paper-item id="{{node.name | lowercase}}" selected='{{selected == node.name}}'>
      <a href="{{node.location}}" tabindex="-1">{{node.name}}</a>
    </paper-item>
  </template>
</core-menu>

我不明白为什么需要两个嵌套模板，所以我稍微简化了一些。现在唯一要做的就是将演示菜单的 selected 属性设置为正确的名称（根本不需要 id，按名称比较项目很好）：

<cw-style-demo-menu selected="Assets">

完整的实时预览：http://plnkr.co/edit/E2B94tfAhJXnPZrusjtz?p=preview

聚合物核心项目选择问题

Polymer core-item selected issue

polymer

web-component