在Polymer中创建自定义元素的两种不同方法

Question

我是Polymer的新手。我已经看到有两种方法可以在Polymer（v2.0）中创建自定义元素。

一个是

<script>
     Polymer({
         is: 'custom-element',
         properties: {...},
         ....
     });
</script>

另一个是

<script>
    class CustomElement extends Polymer.Element {
        static get is() { return  'x-foo' }
    }
    customElements.define(XFoo.is, XFoo);
</script>

这两种方法之间有什么区别吗？在第二种方法中，可以轻松地extends任何现有元素。如何使用第一种方法？