Question

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

这是我到目前为止所做的：

的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中工作正常但我在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 docs here中链接的Plunker中也可以观察到相同的错误。希望聚合物团队能够解决这个问题。

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

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

Answer 2

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

聚合物示例代码无法在Firefox中运行

2 个答案: