Question

我使用了Loopback / Polymer入门套件作为应用程序的起始基础，但它似乎不适用于Chrome以外的浏览器（即Firefox / IE / Safari）。入门套件代码的演示适用于其他浏览器，所以我知道它必须是可能的，但我无法将代码转换为有效的结构。我想知道是否有人会对我为什么它与我的index.html中的结构不起作用有任何见解。它不会在其他浏览器上读取我的<application-polymer>元素或本机HTML元素（如果我将其添加）。

我导入了webcomponents.js文件，我的元素都在client / element目录下并链接到client / elements / elements.html。 它在Chrome中完美运行，但没有其他浏览器。请帮忙！

<!doctype html>
<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="Application">
  <title>Site</title>

  <link rel="shortcut icon" sizes="32x32" href="/images/site-thumbnail.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

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

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

  <!-- 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">

  <!-- 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">

  <!-- 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 -->

  <!-- build:js scripts/bundle.js -->
  <script src="scripts/bundle.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">
  <!-- <link rel="import" href="elements/application-polymer.html"> -->

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

  <style>

  body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    background-color: #eee;
  }

</style>
</head>

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

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

    <!-- <h1>HELLO</h1> -->
    <application-polymer></application-polymer>

  </template>

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

</html>

此应用程序所基于的完整入门套件的链接如下： https://github.com/klarkc/polymer-loopback-starter-kit

index.html结构不同（尝试从elements / elements.html导入自定义Web组件，而不是在index.html中创建它们，这对于复杂的应用程序来说是不现实的），这就是我遇到问题的原因。

Answer 1

我不确定你有什么，但它似乎不是最新的入门套件，我相信它现在遵循PRPL模式并在启动周期的后期加载这些东西。 / p>

如果您查看它，它会尝试动态决定加载Web组件polyfill，而不管浏览器是否支持Web组件。

   <script>
      // Setup Polymer options
      window.Polymer = {
        dom: 'shadow',
        lazyRegister: true
      };
      // Load webcomponentsjs polyfill if browser does not support native Web Components
      (function() {
        'use strict';
        var onload = function() {
          // For native Imports, manually fire WebComponentsReady so user code
          // can use the same code path for native and polyfill'd imports.
          if (!window.HTMLImports) {
            document.dispatchEvent(
              new CustomEvent('WebComponentsReady', {bubbles: true})
            );
          }
        };
        var webComponentsSupported = (
          'registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template')
        );
        if (!webComponentsSupported) {
          var script = document.createElement('script');
          script.async = true;
          script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
          script.onload = onload;
          document.head.appendChild(script);
        } else {
          onload();
        }
      })();
      // Load pre-caching Service Worker
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('service-worker.js');
        });
      }
    </script>

我怀疑您没有正确初始化非Chrome浏览器的polyfill

我建议实际使用polymer-cli来创建这里描述的框架

https://www.polymer-project.org/1.0/toolbox/

环回聚合物跨浏览器兼容性

1 个答案: