Difference between two ways to define/register a custom element in polymer-2.0

Question

I am using polymer 2.0 and have found there are two ways of defining or registering a custom element. Could someone elaborate on when it is best to use one method over the other?

Method.1

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

Method.2

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

Answer 1

If you check the docs here you will see that basically the first option, that uses the class syntax is the Polymer 2 way. The second one you have is also on that page, but under "Define a legacy element", and that is because it's actually the syntax that was used in Polymer 1. It's still being supported and you might want to use it especially if your component uses something built for Polymer 1, like behaviours, that have been replaced by mixins.

Also basically if you're using a transpiler the ES6 class syntax will be turned in to that sort of function. So you can think of the first method as some syntactic sugar that you can use to make things easier to understand.