matthewp/example.html

## example.html
<!doctype html>
<html lang="en">
<title>Some title</title>

<my-element id="myel"><my-element>

<script type="module">
  class MyElement extends HTMLElement {
    static get observedAttributes() {
      let defines = this.define;
      let attrs = [];
      for(let [prop, definition] of Object.entries(defines)) {
        if(definition.attribute) {
          attrs.push(prop);
        }
      }
      return attrs;
    }

    static get define() {
      return {
        foo: {
          attribute: true
        }
      }
    }

    attributeChangedCallback(attrName, oldValue, newValue) {
      console.log(attrName, 'changed to', newValue);
    }
  }

  customElements.define('my-element', MyElement);
</script>
	<!doctype html>
	<html lang="en">
	<title>Some title</title>

	<my-element id="myel"><my-element>

	<script type="module">
	class MyElement extends HTMLElement {
	static get observedAttributes() {
	let defines = this.define;
	let attrs = [];
	for(let [prop, definition] of Object.entries(defines)) {
	if(definition.attribute) {
	attrs.push(prop);
	}
	}
	return attrs;
	}

	static get define() {
	return {
	foo: {
	attribute: true
	}
	}
	}

	attributeChangedCallback(attrName, oldValue, newValue) {
	console.log(attrName, 'changed to', newValue);
	}
	}

	customElements.define('my-element', MyElement);
	</script>