聚合物示例代码不能在Firefox中工作

我正在尝试Google提供的示例代码https://www.polymer-project.org/1.0/start/first-element/intro。聚合物示例代码不能在Firefox中工作

这是我到目前为止有：

的index.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>

图标肘demo.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中可以正常工作t我在FF中出现以下错误：

TypeError: document.registerElement is not a function

我已经包含了polyfill。还有其他东西丢失？

来源

2017-03-01 kargirwar

你没有做错什么。 index.html文件中的以下行默认为webcomponents polyfill的最新版本（v1.0.0-rc.1）。

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

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

现在要解决它，你可以明确地使用旧版本。例如。

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

来源

2017-03-01 09:21:40 Maria

我在Github上打开了[issue]（https://github.com/webcomponents/webcomponentsjs/issues/699）。 – Maria

WebComponents v1.0.0 +只能用于Polymer 2.0。使用聚合物1的版本^ 0.7.24。

来源

2017-07-12 16:43:42

聚合物示例代码不能在Firefox中工作

回答

相关问题