aleroddepaz/counter.html

## counter.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello, ES6</title>
    <script src="counter.js"></script>
  </head>
  <body>
    <my-counter></my-counter>
  </body>
</html>

## counter.js
'use strict';

class Counter extends HTMLElement {
  createdCallback() {
    this.innerHTML = `<div>
      <button class="increase">+</button>
      <button class="decrease">-</button>
      <span>Counter: </span><span class="count"/>
    </div>`;
    this.count = 0;
    this.querySelector('.increase').addEventListener('click', () => this.updateCount(1));
    this.querySelector('.decrease').addEventListener('click', () => this.updateCount(-1));
  }
  attachedCallback() {
    this.querySelector('.count').innerText = this.count;
  }
  updateCount(offset) {
    this.count += offset;
    this.querySelector('.count').innerText = this.count;
  }
}

document.registerElement('my-counter', Counter);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hello, ES6</title>
	<script src="counter.js"></script>
	</head>
	<body>
	<my-counter></my-counter>
	</body>
	</html>
	'use strict';

	class Counter extends HTMLElement {
	createdCallback() {
	this.innerHTML = `<div>
	<button class="increase">+</button>
	<button class="decrease">-</button>
	<span>Counter: </span><span class="count"/>
	</div>`;
	this.count = 0;
	this.querySelector('.increase').addEventListener('click', () => this.updateCount(1));
	this.querySelector('.decrease').addEventListener('click', () => this.updateCount(-1));
	}
	attachedCallback() {
	this.querySelector('.count').innerText = this.count;
	}
	updateCount(offset) {
	this.count += offset;
	this.querySelector('.count').innerText = this.count;
	}
	}

	document.registerElement('my-counter', Counter);