即使在凉亭重新安装后，聚合物元件也无法正常工作答案

【问题标题】：Polymer elements not working properly even after bower reinstall即使在凉亭重新安装后，聚合物元件也无法正常工作
【发布时间】：2016-06-08 02:25:30
【问题描述】：

好的。这是我最后的手段，直到翻转桌子并永远告别 Polymer。在过去的 3 天里，我一直在尝试在 Polymer 中做一些基本的事情，但我一直没能做到。在包括一些纸张元素和缓存之间（显然，甚至从 Chrome 的工具箱中禁用它似乎都不起作用）我不知道哪个是让我最头疼的。我也没有办法调试项目。废话不多说……

我终于开始掌握库，直到我尝试使用<paper-dropdown-menu> 和从 github 下载的自定义元素：<simple-slider>。

Simple Slider 似乎不起作用（无法正确显示轮播），并且 paper-dropdown-menu 没有选择该项目。

已成功引用所有依赖项（使用 Visual Studio Code 检查），并且还包含 webComponents polyfill。

这是我的主要 .html 文件：

<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="Polymer Starter Kit">
  <title>Polymer Starter Kit</title>

  <!-- Place favicon.ico in the `app/` directory -->

  <!-- Chrome for Android theme color -->
  <meta name="theme-color" content="#2E3AA1">

  <!-- Web Application Manifest -->
  <link rel="manifest" href="manifest.json">

  <!-- Tile color for Win8 -->
  <meta name="msapplication-TileColor" content="#3372DF">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="PSK">
  <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
  <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

  <!-- Tile icon for Win8 (144x144) -->
  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <!-- endbuild -->

  <!-- Because this project uses vulcanize this should be your only html import
       in this file. All other imports should go in elements.html -->
  <link rel="import" href="elements/elements.html">

  <!-- For shared styles, shared-styles.html import in elements.html -->
  <style is="custom-style" include="shared-styles"></style>
</head>

<body unresolved>
  <!-- build:remove -->
  <span id="browser-sync-binding"></span>
  <!-- endbuild -->

  <template is="dom-bind" id="app">

    <pgarena-navbar></pgarena-navbar>
     <simple-slider style="width:100%; height:500px" auto-play="true">
        <img src="https://placehold.it/350x150"/>
        <img src="https://placehold.it/350x150"/>
        <img src="https://placehold.it/350x150"/>
    </simple-slider>

    <div class="container">
      <paper-dropdown-menu label="Dinosaurs">
        <paper-listbox class="dropdown-content">
          <paper-item>allosaurus</paper-item>
          <paper-item>brontosaurus</paper-item>
          <paper-item>carcharodontosaurus</paper-item>
          <paper-item>diplodocus</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>

    <pgarena-tournament-card>

        </pgarena-tournament-card>
        <pgarena-tournament-card>
        </pgarena-tournament-card>
        <pgarena-tournament-card>
        </pgarena-tournament-card>
        <pgarena-tournament-card>
        </pgarena-tournament-card>
    </div>


    <!-- Uncomment next block to enable Service Worker support (1/2) -->
    <!--
    <paper-toast id="caching-complete"
                 duration="6000"
                 text="Caching complete! This app will work offline.">
    </paper-toast>

    <platinum-sw-register auto-register
                          clients-claim
                          skip-waiting
                          base-uri="bower_components/platinum-sw/bootstrap"
                          on-service-worker-installed="displayInstalledToast">
      <platinum-sw-cache default-cache-strategy="fastest"
                         cache-config-file="cache-config.json">
      </platinum-sw-cache>
    </platinum-sw-register>
    -->

  </template>

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->
</body>

</html>

元素.html：

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">

<!-- App Elements -->
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">


<!-- Custom Elements -->
<link rel="import" href="pgarena-navbar/pgarena-navbar.html">
<link rel="import" href="pgarena-container/pgarena-container.html">
<link rel="import" href="pgarena-tournament-card/pgarena-tournament-card.html">

<!-- 3rd Party Non Google -->
<link rel="import" href="../bower_components/polymer-simple-slider/src/simple-slider.html">


<!-- Uncomment next block to enable Service Worker Support (2/2) -->
<!--
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">
-->

<!-- Configure your routes here -->
<link rel="import" href="routing.html">

<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="my-greeting/my-greeting.html">
<link rel="import" href="my-list/my-list.html">

顺便说一句：我尝试重新安装所有 Bower 软件包，但没有成功。尝试将最新的 Polymer 解压缩到 bower_components 文件夹中，但没有成功。

有什么想法吗？我无法相信使用它会如此痛苦。

【问题讨论】：

标签： polymer

【解决方案1】：

Simple Slider 似乎不起作用（无法正确显示轮播）

我假设您指的是polymer-simple-slider。该项目依赖于 Polymer 0.2.x，它与最新版本的 Polymer（撰写本文时为 1.10.1）不兼容。如果您有兴趣升级该元素，可以关注migration guide。元素的源代码看起来很简单，升级 IMO 也不会花太多精力。

paper-dropdown-menu 不选择该项目。

请澄清你的意思。选择在这里工作正常：

<head>
  <base href="https://polygit.org/polymer+1.10.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="neon-animation/web-animations.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-item/paper-item.html">
</head>
<body>
  <paper-dropdown-menu label="Dinosaurs">
    <paper-listbox slot="dropdown-content" class="dropdown-content">
      <paper-item>allosaurus</paper-item>
      <paper-item>brontosaurus</paper-item>
      <paper-item>carcharodontosaurus</paper-item>
      <paper-item>diplodocus</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
</body>

^codepen

【讨论】：

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。我缺少纸质列表框@_@。托尼，我想借此机会向您询问使用 Polymer 时的提示或建议。你是怎么学会的？附带说明一下，感谢您让我知道该模块适用于 0.2。我不会升级它，因为我宁愿实现一些不同的东西（最好使用背景图像和 css，这样我就可以利用背景大小的“封面”属性）。非常感谢。！！！
顺便说一句，你知道我怎么能确定谷歌浏览器没有捕捉到 html 导入？我在开发者工具中禁用了一个设置（在 DevTools 打开时禁用缓存）
我很高兴有帮助。除了阅读文档之外，我还通过实验学习了 Polymer，并深入了解了各个元素的来源及其演示。我使用 Webstorm，它可以让我通过 CTRL-click 快速跳转到源代码。在Polymer App Toolbox 出现之前，我发现yeoman 很有帮助，然后是PSK（您显然正在使用它）。
DevTools Network 选项卡应指示文件是否从缓存中提取。
嗯，我明白了。似乎这将是相同的路径。另一方面，我有好消息！你帮了大忙：D！阅读您的答案后，我通过 Polymer 取得了重大突破。我能够在大约 2 小时内完成一些基本布局，而在过去的 3 天里我试图理解它。