{"id":19107191,"url":"https://github.com/govtechsg/sgds-web-component","last_synced_at":"2026-04-29T05:05:33.806Z","repository":{"id":58628518,"uuid":"530693259","full_name":"GovTechSG/sgds-web-component","owner":"GovTechSG","description":"SGDS Web component written in Lit 3","archived":false,"fork":false,"pushed_at":"2026-04-24T01:27:58.000Z","size":46798,"stargazers_count":12,"open_issues_count":76,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2026-04-24T03:27:42.102Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.webcomponent.designsystem.tech.gov.sg/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GovTechSG.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-08-30T14:25:44.000Z","updated_at":"2026-04-22T07:16:09.000Z","dependencies_parsed_at":"2023-10-03T13:29:29.425Z","dependency_job_id":"880836f0-b933-40f3-8034-af28e6d8ea35","html_url":"https://github.com/GovTechSG/sgds-web-component","commit_stats":null,"previous_names":[],"tags_count":185,"template":false,"template_full_name":null,"purl":"pkg:github/GovTechSG/sgds-web-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovTechSG%2Fsgds-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovTechSG%2Fsgds-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovTechSG%2Fsgds-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovTechSG%2Fsgds-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GovTechSG","download_url":"https://codeload.github.com/GovTechSG/sgds-web-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GovTechSG%2Fsgds-web-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32411583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T03:46:11.172Z","status":"ssl_error","status_checked_at":"2026-04-29T03:37:55.317Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T04:11:34.730Z","updated_at":"2026-04-29T05:05:33.800Z","avatar_url":"https://github.com/GovTechSG.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://img.shields.io/badge/lit-324FFF?style=for-the-badge\u0026logo=lit\u0026logoColor=white\" /\u003e \u0026nbsp;\n\u003cimg src=\"https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white\" /\u003e \u0026nbsp;\n\u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" /\u003e\u0026nbsp;\n\n# sgds-web-component\n\n# Installation Guide\n\nYou can load SGDS's web components via CDN or by installing it locally. The library depends on [scoped custom elements registry](https://open-wc.org/docs/development/scoped-elements/) and in certain cases, it is required to import the `@webcomponents/scoped-custom-element-registry` polyfill before the web components.\n\nRefer to [open-wc's directive on scoped-elements](https://open-wc.org/docs/development/scoped-elements/#:~:text=load%20the%20polyfill%20if%20you%20need%20scoping) for more details to know when to use the polyfill.\n\n## CDN\n\nThe CDN loader registers all SGDS elements up front. Depending on your usage, you may or may not need to load the polyfill.\n\n\u003e When using CDN, it is recommended to version control. On initial usage, pick the latest version of the library. See list of available npm versions [here](https://www.npmjs.com/package/@govtechsg/sgds-web-component?activeTab=versions)\n\n\u003e Stick to the version that works for you and make intentional updates on your end when you need the latest library updates. Versions are immutable and thus, stable.\n\n\u003e By not specifying the version, you are using the latest version and subjected to changes made by the library that are not tested on your end. While we do our best to ensure backward compatibility between patches and minor version updates, we cannot guarantee that we have covered all of our user's edge cases.\n\n```js\n// load scoped custom element registry polyfill first (optional, depends on use case)\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@webcomponents/scoped-custom-element-registry\"\u003e\u003c/script\u003e\n// it is recommended to load a particular version when using cdn e.g. https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.0.2\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@\u003cversion\u003e\"\u003e\u003c/script\u003e\n\n//or load a single component e.g. Masthead\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@\u003cversion\u003e/components/Masthead/index.umd.js\"\u003e\u003c/script\u003e\n\n```\n\n## Local Installation\n\nYou can also install SGDS web components locally with the following command\n\n```js\n\nnpm install @govtechsg/sgds-web-component @webcomponents/scoped-custom-element-registry\n\n```\n\nimport the polyfill and library once in you entry point and use the web components throughout your project. Note that the scoped custom element registry polyfill has to be imported before any custom element registration happens.\n\n```js\n// import polyfill first (optional, depends on use case), follow by the web components\nimport \"@webcomponents/scoped-custom-element-registry\";\nimport \"@govtechsg/sgds-web-component\";\n```\n\n# Imports\n\n## Using the custom elements\n\nOnce imported, the custom elements can be used throughout the project.\n\n```js\nimport \"@govtechsg/sgds-web-component\";\n\n//usage\n// \u003csgds-button\u003eHello World\u003c/sgds-button\u003e\n```\n\n## Using the component's class object\n\nWhen writing with Typescript, you might be required to type the components in certain cases. Import the component class like so.\nEach component's Class is exported via named exports, prefixed with `Sgds`.\n\n```js\nimport { SgdsButton, SgdsMainnav } from \"@govtechsg/sgds-web-component/components\";\n```\n\n# Attributes and Properties\n\n## String\n\nThe web components uses attributes to set the properties. For example, the variant attribute is used to set the variant property of the button and in turn alters its class and changes its color\n\n```html\n\u003csgds-button variant=\"secondary\"\u003e\u003c/sgds-button\u003e\n```\n\n## Boolean\n\nBoolean properties are usually false by default. To set it to true, add it as an attribute with no value on the custom element\n\n```html\n\u003csgds-accordion allowMultiple\u003e ... \u003c/sgds-accordion\u003e\n\n\u003csgds-input disabled\u003e\u003c/sgds-input\u003e\n```\n\n## Objects, Arrays and Functions\n\nFunctions have to be passed in via javascript. For attributes that accepts Objects or Arrays, you can pass in as a JSON string or via javascript.\n\n```html\n//via JSON string\n\u003csgds-table rowHeader='[\"Name\", \"BirthDate\"]'\u003e\u003c/sgds-table\u003e\n\n// via Javascript\n\u003cscript\u003e\n  const table = document.querySelector(\"sgds-table\");\n  table.rowHeader = [\"Name\", \"Birthdate\"];\n\u003c/script\u003e\n```\n\n# Events\n\nWhile you can listen for common HTML events like onclick, onmouseover etc., it is not recommended to do so. This is because the events emitted within a component's shadow root are retargeted to look like they've come from the host element rather than internal elements to the Shadow DOM. There are also [certain events](https://web.dev/shadowdom-301/#events-that-are-always-stopped) that will never cross the shadow boundary. See [DOM spec](https://dom.spec.whatwg.org/#retarget) and [Shadow Dom 301](https://web.dev/shadowdom-301/#event-model) for better illustration.\n\nTl;Dr: This may result in, for example, multiple click handlers executing even if the user clicks just once or no events emitted for certain events.\n\nAs such, we recommend you to listen for custom events emitted by SGDS web components over the native HTML events. The emitted custom events, if present, are specified for each component under API table.\n\n```html\n\u003csgds-checkbox\u003eCheck me\u003c/sgds-checkbox\u003e\n\n\u003cscript\u003e\n  const checkbox = document.querySelector(\"sgds-checkbox\");\n  checkbox.addEventListener(\"sgds-change\", event =\u003e {\n    console.log(event.target.checked ? \"checked\" : \"not checked\");\n  });\n\u003c/script\u003e\n```\n\n# Slots\n\nThe [HTMl slot elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) are placeholders inside the web components that you can fill up with your own HTML markups.\n\nThere are two kinds of slots: default and named slots. In the storybook documentation, slots are found under the API table with their names. If the name of a slot is \u003cbold\u003edefault\u003c/bold\u003e, it means that it is a default slot. For all other names, they are named slots.\n\nHandle the usage of the default slot and named slot as below\n\n1. default slot : `\u003cslot\u003e\u003c/slot\u003e`\n\n   ```html\n   \u003csgds-button\u003e\u003cspan\u003eHello World\u003c/span\u003e\u003c/sgds-button\u003e\n   ```\n\n   \"Hello World\" span element is placed in the default slot\n\n2. named slot : `\u003cslot name=\"icon\"\u003e\u003c/slot\u003e`\n\n```html\n\u003csgds-button\u003e\n  \u003cspan\u003eHello World\u003c/span\u003e\n  \u003csvg slot=\"icon\"\u003e\u003c/svg\u003e\n\u003c/sgds-button\u003e\n```\n\n    The svg element with attribute `slot=icon` is placed in the named slot\n\n# Stylings\n\n## Global Styles\n\nThe following css custom variable are exposed to enable users to make modifications across all web components in our library\n\n| css custom variable name     | description                                                |\n| ---------------------------- | ---------------------------------------------------------- |\n| --sgds-body-font-family      | Set the font family of the web components                  |\n| --sgds-body-font-size        | Set the font size of the web components                    |\n| --sgds-body-font-weight      | Set the font weight of the web components                  |\n| --sgds-body-line-height      | Set the line height of the web components                  |\n| --sgds-{stateColor}-rgb      | State colors in red,green,blue value                       |\n| --sgds-{stateColor}          | State colors in hexadecimal value                          |\n| --sgds-{stateColor}          | State colors in hexadecimal value                          |\n| --sgds-{stateColor}-{weight} | State colors with different weightage in hexadecimal value |\n| --sgds-gray-{weight}         | Gray colors with different weightage in hexadecimal value  |\n\n\u003e `{stateColor}` consists of `primary`,`secondary`,`success`,`warning`,`danger`,`info`,`light`,`dark`\n\u003e\n\u003e `{weight}` are color weightage in hundreds starting from `100` up to `900`\n\n```css\n:root {\n  --sgds-body-font-family: \"Inter\";\n  --sgds-body-font-size: 5rem;\n  --sgds-primary-rgb: 89, 37, 220;\n  --sgds-secondary: #1f69ff;\n  --sgds-success-500: #3bb346;\n  --sgds-gray-500: #667085;\n}\n```\n\n## Component Styles\n\nSGDS web component library is shipped with SGDS v2 stylings and does not require you to configure or install any other styling files.\nThe styles of components are built in and can be modified via props, cssparts and css custom properties whenever we specify for such styling modificiations. This information will be specified under API section for each component\n\nYou will require some knowledge of web components and css to do so and the information can be readily available online like mdn web docs for [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and [css](https://developer.mozilla.org/en-US/docs/Web/CSS)\n\n### classes prop\n\nSome components exposes a class-like attribute, usually named \"classes\" prefix with the element's name e.g. buttonClasses.\nSGDS web component library is shipped with our v2 design library, a spin-off from Bootstrap v5. As such, the css tokens are applicable to use and exposed to the shadow DOM.\n\nFor example, you can pass \"btn-lg\" and \"me-2\" to `buttonClasses` prop as another way to customise the stylings of your button.\n\n```html\n\u003csgds-button buttonClasses=\"btn-lg me-2\"\u003eHello world\u003c/sgds-button\u003e\n```\n\n**NOTE** Do not use `class` attribute to attempt to style the shadow tree of the host. We did not the forward of `class` attribute to the shadow DOM so that users are able to style the light dom with it. Use `class` attribute when you need to style the light DOM.\n\n### cssparts\n\nSome components expose cssparts on selected elements of the shadow DOM. See the API table for each component on the css parts exposed.\n\n```css\nsgds-footer::part(footer-bottom) {\n  background-color: grey;\n  font-family: \"Times New Roman\", Times, serif;\n  border: 10px dotted red;\n}\n```\n\n### css custom variable\n\nSome components have defined css custom variable for styling of selected aspects of the element in the shadow DOM. See the API table for the available css custom variables\n\n```css\nsgds-sidenav {\n  --sidenav-theme-color: pink;\n}\n```\n\n## External stylings\n\nAny external stylings done on our web components like positioning needs to be done on your end. You can use [SGDS v2 library](https://designsystem.tech.gov.sg/get-started/)to leverage on the position stylings we provide e.g. ms-auto, flexbox, grids\n\n# Angular\n\nWeb components are [fully supported in Angular](https://custom-elements-everywhere.com/#angular) and can be used directly.\n\n## Demo app\n\nRefer to this [stackblitz demo app](https://stackblitz.com/github/clukhei/angular-stepper?file=README.md) on the usage example\n\n## Installation\n\nLocally install the library or use CDN by adding the script tag to entry point of the Angular application (i.e. index.html). Follow instructions in `Installation` and `Imports` documentation section\n\n## Configuration\n\nApply CUSTOM_ELEMENTS_SCHEMA as shown below\n\n```typescript\n//app.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule],\n  providers: [],\n  bootstrap: [AppComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppModule {}\n```\n\n## Importing the library\n\nWhen using a several of our components it can be more convenient to import the entire library once in App Module and use it throughout the application\n\n```typescript\n//app.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { AppComponent } from \"./app.component\";\nimport \"@govtechsg/sgds-web-component\";\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule],\n  providers: [],\n  bootstrap: [AppComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppModule {}\n```\n\n## Referencing sgds-web-components in Angular\n\n```typescript\n//alert.component.ts\nimport { Component, ElementRef, ViewChild } from '@angular/core';\nimport { SgdsAlert } from '@govtechsg/sgds-web-component';\n\n@Component({\n  selector: 'app-alert',\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.css']\n})\nexport class AlertComponent {\n\n  @ViewChild('alert')\n  alert? : ElementRef\u003cSgdsAlert\u003e\n\n  showAlert() {\n    this.alert?.nativeElement.show()\n  }\n  alertShowState?: boolean = false\n\n}\n\n//alert.component.html\n\u003csgds-button (click)=\"showAlert()\"\u003e{{buttonText}}\u003c/sgds-button\u003e\n\u003csgds-alert #alert [show]=\"alertShowState\"\u003eAlerting\u003c/sgds-alert\u003e\n\n```\n\n# React\n\nWeb components are [not fully supported in React](https://custom-elements-everywhere.com/#react) and should only be used directly when no rich data is required to be passed into the web components and your use case does not require any events handling.\n\nInstead, our library outputs the React version of each of our web components. You can choose to use either the React components or the web components. This React instruction page mainly focuses on how to use the React version.\n\n## Demo app\n\nRefer to this [stackblitz demo app](https://stackblitz.com/edit/vitejs-vite-gebvf5) on the usage example\n\n## Importing the library\n\nFollow instructions in `Installation` documentation section.\nOur components are exported via named exports. Import the components like so\n\n```js\nimport { SgdsButton, SgdsTooltip } from \"@govtechsg/sgds-web-component/react\";\n// or\nimport { SgdsButton } from \"@govtechsg/sgds-web-component/react/button\";\nimport { SgdsTooltip } from \"@govtechsg/sgds-web-component/react/tooltip\";\n```\n\nThe components follow React naming convention, using pascal case as the component name. See the example table below for the web components tagname and its corresponding React name.\n\n| Web Components    | React           |\n| ----------------- | --------------- |\n| sgds-button       | SgdsButton      |\n| sgds-mainnav      | SgdsMainnav     |\n| sgds-mainnav-item | SgdsMainnavItem |\n| sgds-textarea     | SgdsTextarea    |\n\n```jsx\n//Button.ts\nimport { SgdsButton } from \"@govtechsg/sgds-web-component/react\";\n\nconst ButtonWc = () =\u003e {\n  return \u003cSgdsButton\u003eButton\u003c/SgdsButton\u003e;\n};\nexport default ButtonWc;\n```\n\n## Event Handling\n\nWe follow the React convention for events name, each custom event emitted by the web component is prefixed with a `on` and converted to camel case. Native events still applies to the components.\n\nFor example:\n\n| Web Components  | React           |\n| --------------- | --------------- |\n| sgds-change     | onSgdsChange    |\n| sgds-toggle     | onSgdsToggle    |\n| sgds-after-show | onSgdsAfterShow |\n| sgds-after-hide | onSgdsAfterHide |\n\nIf you are using Typescript, note that `event.target` refers to the underlying custom element.\n\n```tsx\nimport { useState } from \"react\";\nimport { SgdsInput } from \"@govtechsg/sgds-web-component/react\";\nimport type { SgdsInput as SgdsInputElement } from \"@govtechsg/sgds-web-component\";\n\nfunction MyComponent() {\n  const [value, setValue] = useState(\"\");\n\n  return \u003cSgdsInput value={value} onSgdsInput={event =\u003e setValue((event.target as SgdsInputElement).value)} /\u003e;\n}\n\nexport default MyComponent;\n```\n\n## NextJs\n\nThe support for NextJS and server side rendering is WIP.\n\n# Vue\n\nWeb components are [fully supported in Vue](https://custom-elements-everywhere.com/#vue) and can be used directly.\n\n## Demo app\n\nRefer to this [stackblitz demo app](https://stackblitz.com/github/clukhei/web-components-with-vue?file=README.md) on the usage example\n\n## Installation\n\nLocally install the library or use CDN by adding the script tag to entry point of the Vue application. Follow instructions in `Installation` and `Imports` documentation section\n\n## Configuration\n\nTell Vue to ignore sgds web components and skip component resolution.\n\n### Vite config example\n\n```typescript\n// vite.config.js\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default {\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          // treat all tags that starts with sgds as custom elements\n          isCustomElement: tag =\u003e tag.includes(\"sgds-\")\n        }\n      }\n    })\n  ]\n};\n```\n\n### Vue CLI config example\n\n```typescript\n// vue.config.js\nmodule.exports = {\n  chainWebpack: config =\u003e {\n    config.module\n      .rule(\"vue\")\n      .use(\"vue-loader\")\n      .tap(options =\u003e ({\n        ...options,\n        compilerOptions: {\n          // treat any tag that starts with sgds- as custom elements\n          isCustomElement: tag =\u003e tag.startsWith(\"sgds-\")\n        }\n      }));\n  }\n};\n```\n\n## Importing the library\n\nImport the library once in your entry point and use it throughout your application.\n\n```typescript\n//App.vue\n\u003cscript\u003e\nimport \"@govtechsg/sgds-web-component\"\n\nexport default {\n  name: \"app\",\n  components: {\n    ...\n  },\n};\n\u003c/script\u003e\n```\n\n## Usage\n\nSee Vue's documentation on usage with [custom elements](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue)\n\n```typescript\n// e.g. Attribute binding with footer\n\u003ctemplate\u003e\n\u003cdiv\u003e\n\u003csgds-footer :title=\"footerAttr.title\" :description=\"footerAttr.description\" :lastUpdatedDate=\"footerAttr.date\" .:links=\"footerAttr.links\"\u003e\u003c/sgds-footer\u003e\n\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang='ts'\u003e\nimport { ref, computed } from \"vue\";\n\nexport default {\n  setup() {\n    const footerAttr = computed(() =\u003e ({\n      title: \"Singapore Design System\",\n      description: \"this is a description\",\n      date: new Date().toDateString(),\n      links : [\n        {\n            \"title\": \"Column 1\",\n            \"links\" : [\n                {\n                    \"href\": \"#1\",\n                    \"label\": \"About Us\"\n                },\n                {\n                    \"href\": \"#2\",\n                    \"label\": \"This is a super long link\"\n                },\n                {\n                    \"href\": \"#3\",\n                    \"label\": \"Test\"\n                },\n                {\n                    \"href\": \"#4\",\n                    \"label\": \"Test\"\n                }\n            ]\n        },\n        {\n            \"title\": \"Column 2\",\n            \"links\" : [\n                {\n                    \"href\": \"#1\",\n                    \"label\": \"About Us\"\n                },\n                {\n                    \"href\": \"#2\",\n                    \"label\": \"This is a super long link\"\n                },\n                {\n                    \"href\": \"#3\",\n                    \"label\": \"Test\"\n                },\n                {\n                    \"href\": \"#4\",\n                    \"label\": \"Test\"\n                }\n            ]\n        },\n        {\n            \"title\": \"Column 3\",\n            \"links\" : [\n                {\n                    \"href\": \"#1\",\n                    \"label\": \"About Us\"\n                },\n                {\n                    \"href\": \"#2\",\n                    \"label\": \"This is a super long link\"\n                },\n                {\n                    \"href\": \"#3\",\n                    \"label\": \"Test\"\n                },\n                {\n                    \"href\": \"#4\",\n                    \"label\": \"Test\"\n                }\n            ]\n        },\n        {\n            \"title\": \"Column 4\",\n            \"links\" : [\n                {\n                    \"href\": \"#1\",\n                    \"label\": \"About Us\"\n                },\n                {\n                    \"href\": \"#2\",\n                    \"label\": \"This is a super long link\"\n                },\n                {\n                    \"href\": \"#3\",\n                    \"label\": \"Test\"\n                },\n                {\n                    \"href\": \"#4\",\n                    \"label\": \"Test\"\n                }\n            ]\n        },\n        {\n            \"title\": \"Column 5\",\n            \"links\" : [\n                {\n                    \"href\": \"#1\",\n                    \"label\": \"About Us\"\n                },\n                {\n                    \"href\": \"#2\",\n                    \"label\": \"This is a super long link\"\n                },\n                {\n                    \"href\": \"#3\",\n                    \"label\": \"Test\"\n                },\n                {\n                    \"href\": \"#4\",\n                    \"label\": \"Test\"\n                }\n            ]\n        },\n        {\n            \"title\": \"Column 6\",\n            \"links\" : [\n                {\n                    \"href\": \"#1\",\n                    \"label\": \"About Us\"\n                },\n                {\n                    \"href\": \"#2\",\n                    \"label\": \"This is a super long link\"\n                },\n                {\n                    \"href\": \"#3\",\n                    \"label\": \"Test\"\n                },\n                {\n                    \"href\": \"#4\",\n                    \"label\": \"Test\"\n                }\n            ]\n        }\n      ]\n    }))\n    return { footerAttr };\n  },\n};\n\u003c/script\u003e\n```\n\n```typescript\n// e.g. of v-model usage on sgds web components\n// e.g. using sgds events for callbacks usage\n\u003ctemplate\u003e\n\u003cform\u003e\n\u003csgds-input @sgds-input=\"onInput\" v-model=\"inputValue\" placeholder=\"Enter your name\"\u003e\n    \u003c/sgds-input\u003e\n\u003cdiv\u003eName: {{inputValue}} \u003c/div\u003e\n\u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript lang='ts'\u003e\nimport { ref, computed } from \"vue\";\n\nexport default {\n  setup() {\n    const inputValue = ref(\"defaultValue\")\n    const onInput = () =\u003e {\n    console.log(\"inputting\")\n    }\n    return { onInput, inputValue };\n  },\n};\n\u003c/script\u003e\n\n```\n\n```typescript\n// e.g. using slots in vue\n\u003csgds-sidenav\u003e\n  \u003csgds-sidenav-item\u003e\n    \u003cspan slot=\"title\"\u003e SideNav Item #1 (control by Argstable) \u003c/span\u003e\n    \u003csgds-sidenav-link\u003esgds-sidenav-link (control by Argstable)\u003c/sgds-sidenav-link\u003e\n    \u003csgds-sidenav-link href=\"#\" disabled=\"\"\u003e\n      sgds-sidenav-link\n    \u003c/sgds-sidenav-link\u003e\n    \u003csgds-sidenav-link href=\"#\"\u003esgds-sidenav-link\u003c/sgds-sidenav-link\u003e\n  \u003c/sgds-sidenav-item\u003e\n  \u003csgds-sidenav-item\u003e\n    \u003cspan slot=\"title\"\u003eSideNav Item #2\u003c/span\u003e\n    \u003csgds-sidenav-link href=\"#\"\u003esgds-sidenav-link\u003c/sgds-sidenav-link\u003e\n    \u003csgds-sidenav-link href=\"#\"\u003esgds-sidenav-link\u003c/sgds-sidenav-link\u003e\n    \u003csgds-sidenav-link href=\"#\"\u003esgds-sidenav-link\u003c/sgds-sidenav-link\u003e\n  \u003c/sgds-sidenav-item\u003e\n  \u003csgds-sidenav-item href=\"#\"\u003e\n    \u003cspan slot=\"title\"\u003eSideNav Item #3\u003c/span\u003e\n  \u003c/sgds-sidenav-item\u003e\n\u003c/sgds-sidenav\u003e\n```\n\n# Extending sgds-web-component\n\nFor users who are leveraging on sgds-web-component as a building block to build and export your own web component library with Lit, you will have to adopt the scoped elements approach to prevent any foreseeable clash of registries between sgds-web-component and your web component library in the case where your users are importing both libraries.\n\n## Scoped Elements\n\nThe CustomElementRegistry is a global registry that provides methods for registering custom elements. One of the limitations of working with this global registry is that multiple versions of the same element cannot co-exist. This causes bottlenecks in software delivery that should be managed by the teams and complex build systems. Scoped Custom Element Registries is a proposal that will solve the problem. Since this functionality won't be available (especially not cross browser) anytime soon, we've adopted [OpenWC's Scoped Elements](https://open-wc.org/docs/development/scoped-elements/).\n\nWhenever a sgds component uses composition (meaning it uses another sgds component inside), we apply ScopedElementsMixin to make sure it uses the right version of this internal component.\n\nFor users who are using sgds component directly for builing application, use the custom elements directly by [importing the custom elements](#using-the-custom-elements)\n\nFor users who are building component libraries on top of sgds-web-component, please adopt OpenWC's scoped elements to prevent exporting our registered custom elements.\n\nThings to note:\n\n1. Import component class from `@govtechsg/sgds-web-component/components`. Here the components are not registered in the custom element registry\n2. Define the tagName you want to assign to the component's class\n\nExample below\n\n```jsx\nimport { SgdsMasthead, SgdsMainnav, SgdsMainnavDropdown, SgdsMainnavItem } from \"@govtechsg/sgds-web-component/components\";\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\n\n// Lit element\n@customElement('my-navbar')\nexport class MyNavbar extends ScopedElementsMixin(LitElement) {\n  static get scopedElements() {\n    return {\n      'sgds-mainnav': SgdsMainnav,\n      'sgds-mainnav-dropdown': SgdsMainnavDropdown,\n      'sgds-mainnav-item': SgdsMainnavItem,\n      'sgds-masthead': SgdsMasthead\n    };\n  }\n    ...\n\n render() {\n    return html`\n        \u003csgds-masthead fluid=\"false\"\u003e\u003c/sgds-masthead\u003e\n            \u003csgds-mainnav\u003e\n              \u003cimg width=\"240\" src=\"https://dev.assets.developer.tech.gov.sg/svg/logo.svg\" slot=\"brand\"\u003e\n                \u003csgds-mainnav-dropdown slot=\"end\"\u003e\n                    \u003cspan slot=\"toggler\"\u003eHome\u003c/span\u003e\n                    \u003csgds-dropdown-item\u003eLogout\u003c/sgds-dropdown-item\u003e\n                \u003c/sgds-mainnav-dropdown\u003e\n                \u003csgds-mainnav-item href=\"#\"\u003eContent\u003c/sgds-mainnav-item\u003e\n                \u003csgds-mainnav-item href=\"#}\"\u003eBiography\u003c/sgds-mainnav-item\u003e\n            \u003c/sgds-mainnav\u003e\n          `\n      }\n}\n```\n\n\u003csgds-alert show variant=\"success\"\u003e\u003csvg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-exclamation-circle\" viewBox=\"0 0 16 16\"\u003e\n\u003cpath d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\"/\u003e\n\u003cpath d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z\"/\u003e\n\u003c/svg\u003e\u003csmall\u003ewe are live and stable now! Please re-read the documentation on how to import the components if you were previously using our unstable version (i.e. package version less than 1.0.0)\u003c/small\u003e\u003c/sgds-alert\u003e\n\n# @govtechsg/sgds-web-component\n\n[![npm](https://img.shields.io/npm/dw/@govtechsg/sgds-web-component?label=npm\u0026style=flat-square)](https://www.npmjs.com/package/@govtechsg/sgds-web-component)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@govtechsg/sgds-web-component/badge)](https://www.jsdelivr.com/package/npm/@govtechsg/sgds-web-component)\n[![github](https://img.shields.io/badge/GitHub-Code-232323.svg?style=flat-square\u0026logo=github\u0026logoColor=white)](https://github.com/GovTechSG/sgds-web-component)\n\n\u003cdiv class=\"home-card-container mt-5\"\u003e\n    \u003csgds-card class=\"col\"\u003e\n        \u003cspan slot=\"title\"\u003eSGDS v2+ \u003ci class=\"bi bi-filetype-scss\"\u003e\u003c/i\u003e\u003c/span\u003e\n        \u003ca slot=\"link\" href=\"https://designsystem.tech.gov.sg/\" target=\"_blank\"\u003e\u003c/a\u003e\n        \u003cp slot=\"description\"\u003eThe components are shipped with SGDS v2 styles and can be used straight out of the box.\u003c/p\u003e\n    \u003c/sgds-card\u003e\n     \u003csgds-card class=\"col\"\u003e\n        \u003cspan slot=\"title\"\u003eFramework agnostic \u003ci class=\"bi bi-puzzle\"\u003e\u003c/i\u003e\u003c/span\u003e\n        \u003ca slot=\"link\" href=\"https://custom-elements-everywhere.com/\" target=\"_blank\"\u003e\u003c/a\u003e\n        \u003cp slot=\"description\"\u003eCompatible with all frameworks. Each web component also has its own React version for full compatibility with React.\u003c/p\u003e\n    \u003c/sgds-card\u003e\n     \u003csgds-card class=\"col\"\u003e\n        \u003cspan slot=\"title\"\u003eTheming with CSS variables \u003ci class=\"bi bi-filetype-css\"\u003e\u003c/i\u003e\u003c/span\u003e\n        \u003ca slot=\"link\" href=\"/docs/style-theming--docs\" target=\"_blank\"\u003e\u003c/a\u003e\n        \u003cp slot=\"description\"\u003eChange the theme with CSS Variables \u003c/p\u003e\n    \u003c/sgds-card\u003e\n     \u003csgds-card class=\"col\"\u003e\n        \u003cspan slot=\"title\"\u003eWorks with CDNs \u003ci class=\"bi bi-truck\"\u003e\u003c/i\u003e\u003c/span\u003e\n        \u003ca slot=\"link\" href=\"/docs/getting-started-installation--docs#method-2-using-cdn\" target=\"_self\"\u003e\u003c/a\u003e\n        \u003cp slot=\"description\"\u003eBesides whole library CDN, each component also has its own CDN.\u003c/p\u003e\n    \u003c/sgds-card\u003e\n    \u003csgds-card class=\"col\"\u003e\n        \u003cspan slot=\"title\"\u003eAccessible \u003ci class=\"bi bi-person-wheelchair\"\u003e\u003c/i\u003e\u003c/span\u003e\n        \u003cp slot=\"description\"\u003eWe are working to build our components fully accessible.\u003c/p\u003e\n    \u003c/sgds-card\u003e\n    \u003csgds-card class=\"col\"\u003e\n        \u003cspan slot=\"title\"\u003eOpen Source \u003ci class=\"bi bi-github\"\u003e\u003c/i\u003e\u003c/span\u003e\n        \u003cp slot=\"description\"\u003eWe are open source and welcome contributions from the community!\u003c/p\u003e\n        \u003ca slot=\"link\" href=\"https://github.com/GovTechSG/sgds-web-component\" target=\"_blank\"\u003e\u003c/a\u003e\n    \u003c/sgds-card\u003e\n    \u003csgds-card class=\"col\"\u003e\n        \u003cspan slot=\"title\"\u003eExtendable \u003ci class=\"bi bi-bricks\"\u003e\u003c/i\u003e\u003c/span\u003e\n        \u003cp slot=\"description\"\u003eOur components are built with LitElement and are extendable. Use them as building blocks to create your complex component. \u003c/p\u003e\n        \u003ca slot=\"link\" href=\"/docs/usage-extending-the-library--docs\" target=\"_blank\"\u003e\u003c/a\u003e\n    \u003c/sgds-card\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgovtechsg%2Fsgds-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgovtechsg%2Fsgds-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgovtechsg%2Fsgds-web-component/lists"}