{
  // Place your ran 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Print to console": {
    "scope": "javascript,typescript",
    "prefix": "clg",
    "body": ["console.log('$1');"],
    "description": "Log output to console"
  },
  "web components class": {
    "scope": "typescript",
    "prefix": "wc",
    "body": [
      "import { isDisabled } from '@/utils/index';"
      "",
      "class Option extends HTMLElement {",
      "  _option: HTMLDivElement;",
      "  _optionContent: HTMLDivElement;",
      "  _shadowDom: ShadowRoot;",
      "  _slot: HTMLSlotElement;",
      "  static get observedAttributes() {",
      "    return ['disabled', 'sheet', 'value'];",
      "  }",
      "  constructor() {",
      "    super();",
      "    this._slot = document.createElement('slot');",
      "    this._option = document.createElement('div');",
      "    this._optionContent = document.createElement('div');",
      "    this._optionContent.appendChild(this._slot);",
      "    this._option.appendChild(this._optionContent);",
      "    const shadowRoot = this.attachShadow({ mode: 'closed' });",
      "    this._shadowDom = shadowRoot;",
      "    shadowRoot.appendChild(this._option);",
      "  }",
      "  get sheet() {",
      "    return this.getAttribute('sheet');",
      "  }",
      "  set sheet(value) {",
      "    this.setAttribute('sheet', value || "");",
      "  }",
      "  get disabled() {",
      "    return isDisabled(this);",
      "  }",
      "  set disabled(value: boolean | string | undefined | null) {",
      "    if (!value || value === 'false') {",
      "      this.removeAttribute('disabled');",
      "    } else {",
      "      this.setAttribute('disabled', '');",
      "    }",
      "  }",
      "  handlerExternalCss() {",
      "    if (this.sheet) {",
      "      try {",
      "        const sheet = new CSSStyleSheet();",
      "        sheet.insertRule(this.sheet);",
      "        this._shadowDom.adoptedStyleSheets = [sheet];",
      "      } catch (error) {",
      "        console.error(",
      "          `Failed to parse the rule in CSSStyleSheet: ${this.sheet}`",
      "        );",
      "      }",
      "    }",
      "  }",
      "  connectedCallback() {}",
      "  disconnectCallback() {}",
      "  attributeChangedCallback(name: string, oldValue: string, newValue: string) {",
      "    if (name === 'disabled' && this._option) {",
      "      if (!newValue || newValue === 'false') {",
      "        this._option.setAttribute('disabled', '');",
      "      } else {",
      "        this._option.removeAttribute('disabled');",
      "      }",
      "    }",
      "    if (name === 'sheet' && this._shadowDom && oldValue !== newValue)",
      "      this.handlerExternalCss();",
      "  }",
      "}"



    ],
    "description": "generate web components ts code"
  }
}