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:
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:
<my-table>
<h1 slot="title">Title of My Table</h1>
</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 <slot> 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, Chrome doesn't support it yet:
