VSCode WebComponent Snippets

WebComponent

"WebComponent": {
	"prefix": "wc",
	"body": [
		"export class WC$1 extends HTMLElement {",
		"",
		"\tconstructor() {",
		"\t\tsuper();",
		"\t}",
		"",
		"\tasync connectedCallback() { }",
		"",
		"}",
		"",
		"customElements.define('wc-$2', WC$3);"
	],
	"description": "Create a Web Component that includes custom attributes"
}

WebComponent-attribute

"WebComponent [Attribute]": {
	"prefix": "wc-attrib",
	"body": [
		"\tget $1() { return this.getAttribute('$2'); }",
		"\tset $3(value) {",
		"\t\t$4",
		"\t}"
	],
	"description": "Create a Web Component attribute getter/setter"
}

WebComponent-with-attributes

"WebComponent w/ Attributes": {
	"prefix": "wc",
	"body": [
		"export class WC$1 extends HTMLElement {",
		"",
		"\tconstructor() {",
		"\t\tsuper();",
		"\t}",
		"",
		"\tstatic get observedAttributes() {",
		"\t\treturn ['$2'];",
		"\t}",
		"",
		"\tattributeChangedCallback(name, oldValue, newValue) {",
		"\t\tthis[name] = newValue;",
		"}",
		"",
		"\tasync connectedCallback() { }",
		"",
		"}",
		"",
		"customElements.define('wc-$3', WC$4);"
	],
	"description": "Create a Web Component that includes custom attributes"
}