prof3ssorSt3v3 · January 6, 2025 23:00
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      class Blah extends HTMLElement {
        constructor() {
          super();
          const shadowRoot = this.attachShadow({ mode: 'closed' });
          const div = document.createElement('div');
          div.textContent = 'Blah. Blah. Blah. Left click or Right click to call function';
          div.style.backgroundColor = 'cornflowerblue';
          div.style.color = 'white';
          div.style.padding = '2rem';
          div.style.fontFamily = 'sans-serif';
          shadowRoot.appendChild(div);

          this.element = div; //shadowRoot.querySelector('div');
          this.element.addEventListener('click', this.handleThing);
          this.element.addEventListener('contextmenu', this.handleThing.bind(this));
        }

        handleThing(ev) {
          ev.preventDefault(); //to hide the context menu on right click
          console.log(ev.type);
          console.log('target', ev.target);
          console.log('this', this);

          this.someMethod(); // ONLY works if `this` references the class object
        }

        someMethod() {
          console.log('some method');
        }
      }

      window.customElements.define('some-component', Blah);

      let APP = {
        m1: function () {
          console.log('m1', this);
        },
        m2: () => {
          console.log('m2', this);
        },
      };
      document.addEventListener('DOMContentLoaded', () => {
        APP.m1();
        APP.m2();
      });
    </script>
  </head>
  <body>
    <some-component></some-component>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script>
	class Blah extends HTMLElement {
	constructor() {
	super();
	const shadowRoot = this.attachShadow({ mode: 'closed' });
	const div = document.createElement('div');
	div.textContent = 'Blah. Blah. Blah. Left click or Right click to call function';
	div.style.backgroundColor = 'cornflowerblue';
	div.style.color = 'white';
	div.style.padding = '2rem';
	div.style.fontFamily = 'sans-serif';
	shadowRoot.appendChild(div);

	this.element = div; //shadowRoot.querySelector('div');
	this.element.addEventListener('click', this.handleThing);
	this.element.addEventListener('contextmenu', this.handleThing.bind(this));
	}

	handleThing(ev) {
	ev.preventDefault(); //to hide the context menu on right click
	console.log(ev.type);
	console.log('target', ev.target);
	console.log('this', this);

	this.someMethod(); // ONLY works if `this` references the class object
	}

	someMethod() {
	console.log('some method');
	}
	}

	window.customElements.define('some-component', Blah);

	let APP = {
	m1: function () {
	console.log('m1', this);
	},
	m2: () => {
	console.log('m2', this);
	},
	};
	document.addEventListener('DOMContentLoaded', () => {
	APP.m1();
	APP.m2();
	});
	</script>
	</head>
	<body>
	<some-component></some-component>
	</body>
	</html>