{"id":22272669,"url":"https://github.com/browserkids/web-components","last_synced_at":"2026-05-09T05:02:12.942Z","repository":{"id":42797044,"uuid":"272002177","full_name":"browserkids/web-components","owner":"browserkids","description":"Non-transpiled ES13+ web components helper functions.","archived":false,"fork":false,"pushed_at":"2023-01-07T19:07:12.000Z","size":269,"stargazers_count":7,"open_issues_count":5,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-28T23:37:23.198Z","etag":null,"topics":["dom","ecmascript","helper-functions","javascript","non-transpiled","tests","vanilla-js","web-components"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/browserkids.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-13T12:13:31.000Z","updated_at":"2022-08-14T16:59:01.000Z","dependencies_parsed_at":"2023-02-07T22:01:32.363Z","dependency_job_id":null,"html_url":"https://github.com/browserkids/web-components","commit_stats":null,"previous_names":["browserkids/dom"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/browserkids/web-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserkids%2Fweb-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserkids%2Fweb-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserkids%2Fweb-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserkids%2Fweb-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/browserkids","download_url":"https://codeload.github.com/browserkids/web-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserkids%2Fweb-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32807861,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["dom","ecmascript","helper-functions","javascript","non-transpiled","tests","vanilla-js","web-components"],"created_at":"2024-12-03T13:07:59.654Z","updated_at":"2026-05-09T05:02:12.925Z","avatar_url":"https://github.com/browserkids.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# @browserkids/web-components\n\n[![npm version](https://badge.fury.io/js/@browserkids%2Fweb-components.svg)](https://badge.fury.io/js/@browserkids%2Fweb-components)\n[![Known Vulnerabilities](https://snyk.io/test/github/browserkids/web-components/badge.svg?targetFile=package.json)](https://snyk.io/test/github/browserkids/web-components?targetFile=package.json)\n[![Build Status](https://github.com/browserkids/web-components/actions/workflows/build.yml/badge.svg)](https://github.com/browserkids/web-components/actions)\n[![Dependency Status](https://img.shields.io/librariesio/release/npm/@browserkids/web-components.svg)](https://libraries.io/npm/@browserkids/web-components)\n\nThis is a collection of useful web components helper functions. They are all written in latest/cutting edge [ECMAScript 2022] code and are \u003cstrong\u003enot\u003c/strong\u003e transpiled.\n\n\u003cbr\u003e\n\n## Installation\n\n### Using a CDN\n\nFastest way to get going. See for yourself:\n\n```html\n\u003cscript type=\"module\"\u003e\nimport { define } from 'https://unpkg.com/@browserkids/web-components';\n\ndefine(class MyElement extends HTMLElement {\n  /* Your custom element logic. */\n});\n\u003c/script\u003e\n```\n\n### Using a bundler\n\nSemi-fast way as well. Just install it via [npm].\n\n```shell\nnpm install -S @browserkids/web-components\n```\n\nImport the functions where you need them.\n\n```js\nimport { define } from '@browserkids/web-components';\n```\n\n\u003cbr\u003e\n\n## Browser support\n\n*Almost* every function uses at least one feature of [ECMAScript 2022] , but **no** ESNext features — promised. So support should be fine for “evergreen” browsers at the time of writing. This means that Internet Explorer is out of the game.\n\nAs this library is not transpiled nor ever will be, you should use [polyfills](https://polyfill.io/) in case you need to support a specific browser version. \n\n\u003cbr\u003e\n\n## API\n\n1. **[define(elementConstructor)](./src/define.js)**  \n\n    The `define()` helper function registers a custom element constructor to the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define). To reduce redundant tasks like [creating a ShadowDOM](./docs/createShadowRoot.md), [binding attributes](./docs/bindAttributes.md), [setting up event listeners](./docs/bindEventListeners.md) or fetching [DOM references](./docs/findReferences.md), the given element constructor will be _extended_ and _enhanced_ to have a consistent developing experience.\n\n    ```html\n    \u003cmy-element\u003e\u003c/my-element\u003e\n    \n    \u003cscript type=\"module\"\u003e\n      import { define } from 'https://unpkg.com/@browserkids/web-components';\n    \n      define(class MyElement extends HTMLElement {\n      // By default define() uses the class name as element name, \n      // you can override this by defining a custom name.\n      static get name() { return 'my-element'; }\n    \n      // You can define a static settings field to override the settings \n      // for the individual functions that define() is using.\n      static settings = {\n        bindAttributes: {},\n        bindEventListeners: {},\n        createShadowRoot: {},\n        findReferences: {},\n      };\n      \n      // Will be used by bindAttributes and turns into a proxy object.\n      data = {};\n    \n      // Will be used by createShadowRoot for shadow dom creation.\n      template = '';\n      \n      // Will be called once the element has been inserted to the DOM,\n      // and the constructor of that class has finished.\n      ready() {}\n    });\n    \n    \u003c/script\u003e\n    ```\n\n[ECMAScript 2022]: https://kangax.github.io/compat-table/es2016plus/\n[Shadow DOM]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM\n[npm]: https://www.npmjs.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrowserkids%2Fweb-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrowserkids%2Fweb-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrowserkids%2Fweb-components/lists"}