Polymer 2.0 Base

by ikbelkirasan

HTML

<base href="https://polygit.org/polymer+polymer+v2.0.0-rc.3/webcomponentsjs+webcomponents+v1.0.0-rc.6/components/">

<script>
  ShadyDOM = {
    force: true
  }
</script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<!-- Load the Polymer.Element base class -->
<link rel="import" href="polymer/polymer-element.html">

<my-element>
  Hello!
</my-element>

<dom-module id="my-element">
  <template>
    <my-inner-element title="This is an inner element">      
      <slot></slot>
    </my-inner-element>
  </template>
  <style>
    my-inner-element {
      font-size: 30px;
    }
  </style>
</dom-module>

<dom-module id="my-inner-element">
  <template>
    <div class="title">{{title}}</div>
    <slot></slot>
  </template>
</dom-module>

JavaScript

// Extend Polymer.Element base class
class MyElement extends Polymer.Element {
  static get is() {
    return 'my-element';
  }

  constructor() {
    super();
  }
    
  connectedCallback() {
    super.connectedCallback();
  }
}

// Register custom element definition using standard platform API
customElements.define(MyElement.is, MyElement);

class MyInnerElement extends Polymer.Element {
  static get is() {
    return 'my-inner-element';
  }
  
  static get properties() {
  	return {
    	title: {
      	type: String
      }
    }
  }

  constructor() {
    super();
  }
    
  connectedCallback() {
    super.connectedCallback();
  }
}

// Register custom element definition using standard platform API
customElements.define(MyInnerElement.is, MyInnerElement);