{"id":16537699,"url":"https://github.com/acdcjunior/web-components","last_synced_at":"2026-03-10T14:05:17.629Z","repository":{"id":144982416,"uuid":"110762899","full_name":"acdcjunior/web-components","owner":"acdcjunior","description":"Web Components v0 and v1 Implementation Examples using ES5, ES2015 (ES6) and TypeScript","archived":false,"fork":false,"pushed_at":"2017-11-22T01:47:38.000Z","size":37,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T21:09:02.143Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://acdcjunior.github.io/web-components/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/acdcjunior.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2017-11-15T00:35:55.000Z","updated_at":"2017-11-18T22:44:33.000Z","dependencies_parsed_at":"2023-04-20T10:02:38.713Z","dependency_job_id":null,"html_url":"https://github.com/acdcjunior/web-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/acdcjunior/web-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acdcjunior%2Fweb-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acdcjunior%2Fweb-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acdcjunior%2Fweb-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acdcjunior%2Fweb-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acdcjunior","download_url":"https://codeload.github.com/acdcjunior/web-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acdcjunior%2Fweb-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30336122,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T12:41:07.687Z","status":"ssl_error","status_checked_at":"2026-03-10T12:41:06.728Z","response_time":106,"last_error":"SSL_read: 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-10-11T18:43:14.103Z","updated_at":"2026-03-10T14:05:17.609Z","avatar_url":"https://github.com/acdcjunior.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Components Implementation Examples\n\nOnline demo: https://acdcjunior.github.io/web-components/\n\n# v0\n\nThe [Web Components **`v0`** example implementations](v0/index.html) folder shows:\n\n- `custom-elements-basic-example-es5`: minimal Web Components `v0` example using `ES5`\n- `custom-elements-basic-example-es2015`: minimal Web Components `v0` example using `ES2015` (`ES6`)\n- `custom-elements-basic-example-ts`: minimal Web Components `v0` example using `TypeScript`\n- `extends-example`: example of Web Components `v0` extending a (browser) native `input` component\n- `template-example`: example of Web Components `v0` cloning and using a `template` tag\n- `shadow-dom-example`: example of Web Components `v0` using the `Shadow DOM`\n- `insert-using-js`: example of Custom Element `v0` inserted programmatically\n- `html-import-example`: example of nested `HTML Import`s and load/error event callback functions\n\n# v1\n\nThe [Web Components **`v1`** example implementations](v1/index.html) folder shows:\n\n- `custom-element-v1-es2015`: minimal Custom Element `v1` example using `ECMAScript 2015` (`ES6`)\n- `shadow-dom-v1-example`: example of Web Components `v1` using the `Shadow DOM`\n\n\n# From v0 to v1\n\n- Custom Elements v1 are not compatible with ES5-style classes.\n [There are polyfills](https://github.com/webcomponents/custom-elements#es5-vs-es2015) and workarounds, but they don't work seamlessly (may not actually use the native implementation, just the polyfilled one) and at best and have many limitations.\n- HTML Imports are dead. They are being replaced by ES6 Modules, which already have some browser support.\n\n# Single file Components\n\nA common way to implement was to declare the custom element's HTML (`\u003ctemplate\u003e`) and JavaScript code (`\u003cscript\u003e`) in a single\nHTML file and import it whenever needed.\n\nBut now that HTML Imports are deprecated, this approach can no longer be used. What happens and what are the alternatives?\n\nThe first consequence is the `.html` file will become a `.js` that will be loaded as a ES6 Module. How to load the template?\n\n- Have the template as a string in the `.js` file;\n- Load the template via Ajax;\n- Add a build step (with webpack, gulp, etc.) and inline the HTML file;\n- Wait for the browsers and see what they will come up with.\n\n## Custom Elements\n\n\n\n#### Migration Guide\n\n| v0  | v1 |\n| ------------- | ------------- |\n| `document.registerElement('tag', {prototype, extends})` | `customElements.define('tag', class, {extends})` |\n| `createdCallback()`  | `constructor()` |\n| `attachedCallback()`  | `connectedCallback()` |\n| `detachedCallback()`  | `disconnectedCallback()` |\n| `attributeChangedCallback(a,o,n)`  | `attributeChangedCallback(a,o,n)` + `static get observedAttributes()` |\n| -  | `adoptedCallback()` |\n| - | `customElements.whenDefined()` |\n| `ElmtClass = document.registerElement(...)` | `ElmtClass = customElements.get('tag')` |\n| | |\n| `.createShadowRoot()` | `.attachShadow({mode: 'open'});` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facdcjunior%2Fweb-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facdcjunior%2Fweb-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facdcjunior%2Fweb-components/lists"}