kristoferjoseph/counter-state.html

## counter-state.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

    <my-counter count=5></my-counter>

  <script type="module">
import enhance from "https://unpkg.com/@enhance/element@1.4.2/dist/index.js?module=true";

enhance("my-counter", {
  attrs: ['count'],
  render({ html, state }) {
    const { attrs = {} } = state;
    const { count = 0 } = attrs;
    // render the input with a count value from the store
    return html`
      <input value="${count}" />
      <button aria-label="decrement">-</button>
      <button aria-label="increment">+</button>
    `;
  },

  connected() {
    // Use the count attribute to set the starting count per instance
    this.count = Number(this.getAttribute("count"))
    this.increment = this.querySelector('[aria-label=increment]')
    this.increment.addEventListener('click', e => {
      this.count = this.count + 1
      this.setAttribute('count', this.count)
    })
    this.decrement = this.querySelector('[aria-label=decrement]')
    this.decrement.addEventListener('click', e => {
      this.count = this.count - 1
      this.setAttribute('count', this.count)
    })
  }
});
  </script>
  </body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title></title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<my-counter count=5></my-counter>

	<script type="module">
	import enhance from "https://unpkg.com/@enhance/element@1.4.2/dist/index.js?module=true";

	enhance("my-counter", {
	attrs: ['count'],
	render({ html, state }) {
	const { attrs = {} } = state;
	const { count = 0 } = attrs;
	// render the input with a count value from the store
	return html`
	<input value="${count}" />
	<button aria-label="decrement">-</button>
	<button aria-label="increment">+</button>
	`;
	},

	connected() {
	// Use the count attribute to set the starting count per instance
	this.count = Number(this.getAttribute("count"))
	this.increment = this.querySelector('[aria-label=increment]')
	this.increment.addEventListener('click', e => {
	this.count = this.count + 1
	this.setAttribute('count', this.count)
	})
	this.decrement = this.querySelector('[aria-label=decrement]')
	this.decrement.addEventListener('click', e => {
	this.count = this.count - 1
	this.setAttribute('count', this.count)
	})
	}
	});
	</script>
	</body>
	</html>