VSCode Snippet for scaffolding webcomponents

vanilla-web-component.code-snippets

{
	// Filename transformations: https://gist.github.com/natemoo-re/94cfba2bfb17cbeec0680c05309ea9ee
	"Scaffold web component": {
		"scope": "javascript,typescript",
		"prefix": "wc",
		"body": [
			"const template = document.createElement('template');",
			"template.innerHTML = $BLOCK_COMMENT_START HTML $BLOCK_COMMENT_END `<style></style><div></div>`",
			"",
			"export class ${TM_FILENAME_BASE/(\\w+)?[-_\\s]+(\\w+)/${1:/capitalize}${2:/capitalize}/g} extends HTMLElement {",
			"  constructor() {",
			"    super();",
			"    this.attachShadow({mode: 'open'});",
			"  }",
			"",
			"  connectedCallback(){",
			"    this.shadowRoot!.appendChild(template.content.cloneNode(true))",
			"    this.render();",
			"  }",
			"  render(){",
			"  }",
			"}",
			"",
			"customElements.define('${TM_FILENAME_BASE}', ${TM_FILENAME_BASE/(\\w+)?[-_\\s]+(\\w+)/${1:/capitalize}${2:/capitalize}/g});"
		],
		"description": "Scaffold vanilla webcomponent"
	}
}