deebloo/custom-element-arguments-1.html

## custom-element-arguments-1.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Element</title>
  </head>

  <body>
    <script type="module">
      import { html, render } from 'https://unpkg.com/lit-html?module';

      class MyElement extends HTMLElement {
        constructor(counterState) {
          this.appState = appState
        }

        attachedCallback() {
          this.render();
        }

        render() {
          render(html`
            <button @click=${() => this.counterState.decrement()}>-</button>
              ${this.counterState.counter}
            <button @click=${() => this.counterState.increment()}>+</button>
          `)
        }
      }

      const counterState = {
        counter: 0,
        increment() {
          this.counter++;
        },
        removeTodo(index) {
          this.counter--;
        }
      }

      customElements.define('my-element', new Proxy(MyElement, {
        construct(target, _args, extended) {
          return Reflect.construct(target, [counterState], extended)
        }
      }));
    </script>

    <my-element></my-element>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>My Element</title>
	</head>

	<body>
	<script type="module">
	import { html, render } from 'https://unpkg.com/lit-html?module';

	class MyElement extends HTMLElement {
	constructor(counterState) {
	this.appState = appState
	}

	attachedCallback() {
	this.render();
	}

	render() {
	render(html`
	<button @click=${() => this.counterState.decrement()}>-</button>
	${this.counterState.counter}
	<button @click=${() => this.counterState.increment()}>+</button>
	`)
	}
	}

	const counterState = {
	counter: 0,
	increment() {
	this.counter++;
	},
	removeTodo(index) {
	this.counter--;
	}
	}

	customElements.define('my-element', new Proxy(MyElement, {
	construct(target, _args, extended) {
	return Reflect.construct(target, [counterState], extended)
	}
	}));
	</script>

	<my-element></my-element>
	</body>
	</html>