聚合物示例代码在 Firefox 中不起作用

Question

我正在尝试 Google 在https://www.polymer-project.org/1.0/start/first-element/intro提供的示例代码。

这是我到目前为止：

索引.html：

<!DOCTYPE html>                                                                                                          
<html lang="en">                                                                                                         
  <head>                                                                                                                 
    <meta charset="utf8">                                                                                                
    <meta http-equiv="X-UA-Compatible" content="IE=edge">                                                                
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">              
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>                         
    <link href="/my_components/icon-toggle-demo.html" rel="import">                                                      
  </head>                                                                                                                
  <body>                                                                                                                 
    <icon-toggle-demo toggle-icon="star"></icon-toggle-demo>                                                             
  </body>                                                                                                                
</html>  

图标切换演示.html：

<link rel="import" href="https://polygit.org/components/polymer/polymer.html">                                              
<link rel="import" href="https://polygit.org/components/iron-icons/iron-icons.html">                                        
<link rel="import" href="icon-toggle.html">                                                                                 


<dom-module id="icon-toggle-demo">                                                                                          
  <template>                                                                                                                
    <style>                                                                                                                 
      :host {                                                                                                               
        font-family: sans-serif;                                                                                            
      };                                                                                                                    
    </style>                                                                                                                

    <h3>Statically-configured icon-toggles</h3>                                                                             

    <icon-toggle toggle-icon="star"></icon-toggle>                                                                          
    <icon-toggle toggle-icon="star" pressed></icon-toggle>                                                                  

    <h3>Data-bound icon-toggle</h3>                                                                                         

    <!-- use a computed binding to generate the message -->                                                                 
    <div><span>[[message(isFav)]]</span></div>                                                                              

    <!-- curly brackets ({{}}} allow two-way binding -->                                                                    
    <icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle>                                                  
  </template>                                                                                                               

  <script>                                                                                                                  
    Polymer({                                                                                                               
      is: "icon-toggle-demo",                                                                                               
      message: function(fav) {                                                                                              
        if (fav) {                                                                                                          
          return "You really like me!";                                                                                     
        } else {                                                                                                            
          return "Do you like me?";                                                                                         
        }                                                                                                                   
      }                                                                                                                     
    });                                                                                                                     
  </script>                                                                                                                 
</dom-module> 

图标-toggle.html：

<link rel="import" href="https://polygit.org/components/polymer/polymer.html">                                              
<link rel="import" href="https://polygit.org/components/iron-icon/iron-icon.html">                                          

<dom-module id="icon-toggle">                                                                                               

  <template>                                                                                                                

    <style>                                                                                                                 
      /* local DOM styles go here */                                                                                        
      :host {                                                                                                               
        display: inline-block;                                                                                              
      }                                                                                                                     

      iron-icon {                                                                                                           
        fill: rgba(0,0,0,0);                                                                                                
        stroke: currentcolor;                                                                                               
      }                                                                                                                     
      :host([pressed]) iron-icon {                                                                                          
        fill: currentcolor;                                                                                                 
      }                                                                                                                     

    </style>                                                                                                                

    <!-- local DOM goes here -->                                                                                            
    <!-- <span>Not much here yet.</span> -->                                                                                
    <!-- <iron-icon icon="polymer"> -->                                                                                     
    <iron-icon icon="[[toggleIcon]]">                                                                                       
    </iron-icon>                                                                                                            
  </template>                                                                                                               

  <script>                                                                                                                  
  Polymer({                                                                                                                 
    is: 'icon-toggle',                                                                                                      
    properties: {                                                                                                           
      toggleIcon: String,                                                                                                   
      pressed: {                                                                                                            
        type: Boolean,                                                                                                      
        value: false,                                                                                                       
        notify: true,                                                                                                       
        reflectToAttribute: true                                                                                            
      }                                                                                                                     
    },
    listeners: {                                                                                                         
      'tap': 'toggle'                                                                                                    
    },                                                                                                                   
    toggle: function() {                                                                                                 
      this.pressed = !this.pressed;                                                                                      
    }                                                                                                                    
  });                                                                                                                    
  </script>                                                                                                              

</dom-module>  

该代码在 chrome 中运行良好，但在 FF 中出现以下错误：

TypeError: document.registerElement is not a function

我已经包含了 polyfill。还缺什么？

Answer 1

你没有做错任何事。index.html文件中的以下行默认为 webcomponents polyfill 的最新版本 (v1.0.0-rc.1)。

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>

Firefox 的当前版本中似乎存在错误。在此处的 Polymer 文档中链接的 Plunker 中也可以观察到相同的错误。这有望由 Polymer 团队解决。

要暂时修复它，您可以明确使用旧版本。例如。

<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.24/webcomponents-lite.js"></script>