{"id":13807327,"url":"https://github.com/corpusculejs/custom-builtin-elements","last_synced_at":"2025-04-11T21:08:07.013Z","repository":{"id":57104057,"uuid":"207929699","full_name":"corpusculejs/custom-builtin-elements","owner":"corpusculejs","description":"A full-featured polyfill for customized built-in elements","archived":false,"fork":false,"pushed_at":"2020-09-10T12:59:28.000Z","size":445,"stargazers_count":12,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T21:08:01.250Z","etag":null,"topics":["builtin","javascript","polyfill","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/corpusculejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-09-12T00:18:37.000Z","updated_at":"2023-08-23T07:39:59.000Z","dependencies_parsed_at":"2022-08-20T17:10:17.303Z","dependency_job_id":null,"html_url":"https://github.com/corpusculejs/custom-builtin-elements","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corpusculejs%2Fcustom-builtin-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corpusculejs%2Fcustom-builtin-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corpusculejs%2Fcustom-builtin-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corpusculejs%2Fcustom-builtin-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corpusculejs","download_url":"https://codeload.github.com/corpusculejs/custom-builtin-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248480432,"owners_count":21110937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["builtin","javascript","polyfill","webcomponents"],"created_at":"2024-08-04T01:01:24.211Z","updated_at":"2025-04-11T21:08:06.991Z","avatar_url":"https://github.com/corpusculejs.png","language":"JavaScript","funding_links":[],"categories":["Archive"],"sub_categories":["Polyfills"],"readme":"# @corpuscule/custom-builtin-elements\n\n[![Latest Stable Version](https://img.shields.io/npm/v/@corpuscule/custom-builtin-elements.svg)](https://www.npmjs.com/package/@corpuscule/custom-builtin-elements)\n[![Package size](https://badgen.net/bundlephobia/minzip/@corpuscule/custom-builtin-elements)](https://bundlephobia.com/result?p=@corpuscule/custom-builtin-elements)\n[![CI Status](https://github.com/corpusculejs/custom-builtin-elements/workflows/CI/badge.svg)](https://github.com/corpusculejs/custom-builtin-elements/actions)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=corpusculejs_custom-builtin-elements\u0026metric=coverage)](https://sonarcloud.io/dashboard?id=corpusculejs_custom-builtin-elements)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=corpusculejs_custom-builtin-elements\u0026metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=corpusculejs_custom-builtin-elements)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=corpusculejs_custom-builtin-elements\u0026metric=bugs)](https://sonarcloud.io/dashboard?id=corpusculejs_custom-builtin-elements)\n\nThis package is a polyfill for the [Customized Built-in Elements](https://html.spec.whatwg.org/multipage/custom-elements.html#customized-built-in-element)\nspecification.\n\n## Rationale\n\nUnfortunately, Safari [is not going](https://github.com/w3c/webcomponents/issues/509#issuecomment-222860736)\nto support this part of the Custom Elements spec, as well as IE 11 and Edge do\nnot have this feature on board. This polyfill aims to fill this gap and provide\nsupport for this feature for all browsers that miss it.\n\nDifferently from [@ungap/custom-elements-builtin](https://github.com/ungap/custom-elements-builtin), this polyfills allow the usage of the `constructor`, which is apparently a [caveat](https://github.com/ungap/custom-elements-builtin#constructor-caveat) of that alternative library.\n\nThis polyfill provides a solution that issue and makes it possible to use the customized built-in elements in all browsers that lack support for them: Safari, Edge, IE 11.\n\n## Installation\n\nnpm:\n\n```bash\n$ npm install @corpuscule/custom-builtin-elements\n```\n\nYarn:\n\n```bash\n$ yarn add @corpuscule/custom-builtin-elements\n```\n\n[https://unpkg.com](https://unpkg.com)\n\n```javascript\nimport 'https://unpkg.com/@corpuscule/custom-builtin-elements';\n```\n\n## Support\n\nTo use this polyfill with IE 11 you need the following tools:\n\n- `Symbol` polyfill (with support for `Symbol.hasInstance`).\n- `Promise` polyfill.\n- [@babel/plugin-transform-instanceof](https://www.npmjs.com/package/@babel/plugin-transform-instanceof)\n  applied to your code that uses `instanceof` against any built-in constructor\n  (like `HTMLButtonElement` etc.).\n\nAlso, for all browsers that do not support native web components, you need an\nimplementation of the `customElements` registry existing. You have the following\nchoices:\n\n- Use [`@webcomponents/webcomponentsjs`](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs),\n  that will also add support for autonomous custom elements.\n- Use the minimal implementation of `customElements` provided by this polyfill\n  that would allow you to use the customized built-in elements only.\n\nNote that both minimal implementation or `@webcomponents/webcomponentsjs`\npolyfill should be executed **before** the main polyfill because it will\noverride methods of the `customElements` registry.\n\nExamples of adding minimal implementation:\n\n- via npm and ESM:\n\n```javascript\nimport '@corpuscule/custom-builtin-elements/lib/customElementsBase';\nimport '@corpuscule/custom-builtin-elements';\n```\n\n- via [https://unpkg.com](https://unpkg.com) and `script`:\n\n```html\n\u003cscript src=\"https://unpkg.com/@corpuscule/custom-builtin-elements/lib/customElementsBase.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@corpuscule/custom-builtin-elements\"\u003e\u003c/script\u003e\n```\n\n## Example\n\n```javascript\nclass ClickCounter extends HTMLButtonElement {\n  constructor() {\n    super();\n    this._count = 0;\n    this.increase = this.increase.bind(this);\n  }\n\n  get count() {\n    return this._count;\n  }\n\n  connectedCallback() {\n    this.addEventListener('click', this.increase);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('click', this.increase);\n  }\n\n  increase() {\n    this._count += 1;\n  }\n}\n\ncustomElements.define('x-click-counter', ClickCounter, {extends: 'button'});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorpusculejs%2Fcustom-builtin-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorpusculejs%2Fcustom-builtin-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorpusculejs%2Fcustom-builtin-elements/lists"}