https://github.com/leopoldthecoder/web-components-demo
A table component based on Web Components
https://github.com/leopoldthecoder/web-components-demo
Last synced: 3 months ago
JSON representation
A table component based on Web Components
- Host: GitHub
- URL: https://github.com/leopoldthecoder/web-components-demo
- Owner: Leopoldthecoder
- Created: 2018-03-27T10:56:43.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-28T11:28:42.000Z (about 8 years ago)
- Last Synced: 2025-01-19T01:09:45.889Z (over 1 year ago)
- Language: HTML
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# web-components-demo
> This demo is runnable in latest Chrome. Not tested in other browsers.
A table component based on Web Components, which is made up of four parts:
- [Custom Elements](https://www.w3.org/TR/custom-elements/)
- [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/)
- [HTML Imports](https://w3c.github.io/webcomponents/spec/imports/)
- [The Template Element](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)
## API
The table is registered as a custom element `my-table`. You can pass to it an attribute named `rows`, defining all the cells and rows.
Attribute | Type
----------|-----
rows | Object[]
It has a slot for its title. When you need a title for your table, you can:
```html
Title of My Table
```
Each 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.
Event | Parameter
------|----------
select-change| { detail: { row, checked } }
## v0 vs. v1
As 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).
Note 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 `` tag) because some of them may cause error or simply won't work in the latest Chrome.
## Oops
One 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.
I didn't do customized built-in elements because according to [caniuse](https://caniuse.com/#search=web%20components), Chrome doesn't support it yet:
