{"id":20842870,"url":"https://github.com/leopoldthecoder/web-components-demo","last_synced_at":"2026-03-16T11:32:31.938Z","repository":{"id":95581709,"uuid":"126972856","full_name":"Leopoldthecoder/web-components-demo","owner":"Leopoldthecoder","description":"A table component based on Web Components","archived":false,"fork":false,"pushed_at":"2018-03-28T11:28:42.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-19T01:09:45.889Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Leopoldthecoder.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":"2018-03-27T10:56:43.000Z","updated_at":"2018-03-28T11:28:43.000Z","dependencies_parsed_at":"2023-05-20T23:15:28.644Z","dependency_job_id":null,"html_url":"https://github.com/Leopoldthecoder/web-components-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leopoldthecoder%2Fweb-components-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leopoldthecoder%2Fweb-components-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leopoldthecoder%2Fweb-components-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leopoldthecoder%2Fweb-components-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Leopoldthecoder","download_url":"https://codeload.github.com/Leopoldthecoder/web-components-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243198672,"owners_count":20252251,"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":[],"created_at":"2024-11-18T01:25:49.126Z","updated_at":"2025-12-26T11:47:58.853Z","avatar_url":"https://github.com/Leopoldthecoder.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# web-components-demo\n\n\u003e This demo is runnable in latest Chrome. Not tested in other browsers.\n\nA table component based on Web Components, which is made up of four parts:\n- [Custom Elements](https://www.w3.org/TR/custom-elements/)\n- [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/)\n- [HTML Imports](https://w3c.github.io/webcomponents/spec/imports/)\n- [The Template Element](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)\n\n## API\n\nThe table is registered as a custom element `my-table`. You can pass to it an attribute named `rows`, defining all the cells and rows.\n\nAttribute | Type\n----------|-----\nrows | Object[]\n\n\u003cbr\u003e\n\nIt has a slot for its title. When you need a title for your table, you can:\n```html\n\u003cmy-table\u003e\n  \u003ch1 slot=\"title\"\u003eTitle of My Table\u003c/h1\u003e\n\u003c/my-table\u003e\n```\n\n\u003cbr\u003e\n\nEach row has a checkbox. Checking it will fire an event called `select-change` with a parameter `event`. In `event.detail` you'll know which row has been checked and its checking status.\n\nEvent | Parameter\n------|----------\nselect-change| { detail: { row, checked } }\n\n## v0 vs. v1\nAs the specs evolve, there're different writings for shadow DOMs, slots, custom element registrations, etc. I implemented the same table component in both old and new writings (I call them v0 and v1 respectively).\n\nNote that in order for both components to work properly in Chrome, I didn't implement the v1 component with all new v1 features (e.g. the new `\u003cslot\u003e` tag) because some of them may cause error or simply won't work in the latest Chrome.\n\n## Oops\nOne thing this demo doesn't cover is something called *customized built-in element* (you can find its definition in the custom elements spec). Both components in this repo are *autonomous custom element*, if you want to know the terminology.\n\nI didn't do customized built-in elements because according to [caniuse](https://caniuse.com/#search=web%20components), Chrome doesn't support it yet:\n\n\u003cimg src=\"https://user-images.githubusercontent.com/10095631/37965152-ae9ea7e4-31f6-11e8-9c8f-162dd26d6629.png\" alt=\"caniuse\" width=\"480px\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleopoldthecoder%2Fweb-components-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleopoldthecoder%2Fweb-components-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleopoldthecoder%2Fweb-components-demo/lists"}