Skip to content

Instantly share code, notes, and snippets.

@evanplaice
Last active October 4, 2019 04:40
Show Gist options
  • Save evanplaice/4ccfd7dfd2417f4de10e91a7a3df1da7 to your computer and use it in GitHub Desktop.
Save evanplaice/4ccfd7dfd2417f4de10e91a7a3df1da7 to your computer and use it in GitHub Desktop.
VSCode WebComponent Snippets
"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]": {
"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 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"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment