Polymer 3: Declare and initialize simple properties

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- import polyfills -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <!-- import elements -->
    <script type="module" src="./custom-element.js"></script>
  </head>
  <body>
    <h2>Declare and initialize simple properties</h2>
      <b>Initialize properties from <code>properties</code> getter</b>
        <custom-element></custom-element><br/>
      <b>Initialize properties from attributes in markup</b>
        <custom-element 
         my-boolean=true
         my-string="Hello World"
         my-number="344871e3"
         my-date="12-01-2018"
        ></custom-element>
  </body>
</html>

// Import the Polymer library and the html helper function
import { PolymerElement, html } from "https://unpkg.com/@polymer/polymer@3.0.0-pre.12/polymer-element.js";
// Define the class for a new element called custom-element
class CustomElement extends PolymerElement {
  static get properties() {
    return {
      /* Declare a Boolean property with a default value */
      myBoolean: {
        type: Boolean,
        value: false
      },
      
      /* Declare a String property with a default value */
      myString: {
        type: String,
        value: "I am a string."
      },
      
      /* Declare a Number property with a default value */
      myNumber: {
        type: Number,
        value: 202.123
      },
      
      /* Declare a Date property with a default value */
      myDate: {
        type: Date,
        value: new Date("1900-01-01"),
      }
    };
  }
  
  static get template() {
    return html`
      <p>myBoolean is: [[myBoolean]]</p>
      <p>myString is: [[myString]] </p>
      <p>myNumber is: [[myNumber]] </p>
      <p>myDate is: [[myDate]] </p>
      `;
  }
}
// Register the new element with the browser
customElements.define('custom-element', CustomElement);