Web Component Builder

webcomponent.txt

	"Web Component Builder": {
		"prefix": "webc",
		"body": [
			"customElements.define('my-web-component-name', class extends HTMLElement {",
			"\t // necessary boilerplate",
			"\tconstructor() {",
			"\t\tsuper();",
			"\t}; // end constructor() \n",
			"\t // deal with any kind of 'on...' event",
			"\t // referenced below",
			"\thandleEvent(event) {",
			"\t\tthis[`on${event.type}`](event);",
			"\t}; // end handleEvent()\n",
			"\tconnectedCallback() {",
			"\t\tthis.addEventListener('click', this);",
			"\t}; // end connectedCallback()\n",
			"\t // different 'on...' events, let's go with 'onclick' as the most common",
			"\tonclick(event) {",
			"\t}; // end onclick()",
			"}); // end customElements.define()"
		],
		"description": "Construct Web Component"
	}

//
// which gives you in vscode this js:
//
customElements.define('my-web-component-name', class extends HTMLElement {
   // necessary boilerplate
  constructor() {
    super();
  }; // end constructor() 

   // deal with any kind of 'on...' event
   // referenced below
  handleEvent(event) {
    this[`on${event.type}`](event);
  }; // end handleEvent()

  connectedCallback() {
    this.addEventListener('click', this);
  }; // end connectedCallback()

   // different 'on...' events, let's go with 'onclick' as the most common
  onclick(event) {
  }; // end onclick()
}); // end customElements.define()