在polymer-2.0中定义/注册自定义元素的两种方法之间的差异

我正在使用polymer 2.0，发现有两种方法可以定义或注册自定义元素。有人能详细说明什么时候最好使用一种方法而不是另一种吗

方法1

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<script>
  class MyPolymerElement extends Polymer.Element {
    ...
  }
  customElements.define('my-polymer-element', MyPolymerElement);
</script>

类mypolymerement扩展了Polymer.Element{
...
}
自定义元素。定义（'my-polymer-element'，mypolymerement）；

方法2

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<script>
  (function(){
    'use strict';
    Polymer({
      is: 'my-polymer-element',
    });
  })()
</script>

（功能（）{
"严格使用",；
聚合物({
是‘我的聚合物元素’，
});
})()

如果您查看文档，您将看到基本上使用类语法的第一个选项是Polymer 2 way。第二个也在那个页面上，但在“定义遗留元素”下，这是因为它实际上是Polymer 1中使用的语法。它仍然受到支持，您可能希望使用它，特别是如果您的组件使用为聚合物1构建的东西，如行为，已被混合替代

同样，如果您使用的是transpiler，ES6类语法也会被转换成这种函数。所以你可以把第一种方法看作是一些语法上的糖分，可以用来让事情更容易理解