Create a Custom Element with different sub-types

Question

I am currently implementing a data-table element using custom elements (web components). The table can have different types of cells (text, number, date, etc) that are used to render each row.

E.g

<my-table>
    <my-table-cell-text column="name"></my-table-cell-text>
    <my-table-cell-date column="dob" format="YYYY-MM-DD"></my-table-cell-date>
    <my-table-cell-number column="salary" decimals="2"></my-table-cell-number >
</my-table>

I also have a MyTableCell class which all cell elements extends. This works fine for sharing common functionality, however styling can be a pain, because each cell type is its own html tag. Currently, I am adding a css class when extending MyTableCell, but for argument's sake, lets say I don't want to do that.

The ideal solution would be to be able to extend a custom element, using the is keyword, e.g <my-table-cell is="my-table-cell-text">, but that's only allowed for built in html elements.

I can think of 3 approaches of solving this issue:

Have syntax similar to <input type="">, but that's a lot more work, since you are no longer extending a base class, but rather creating variations of the same element and this means you need a custom way of registering the different variations, something like a static MyTableCell.registerType
A composable approach, where I wrap a renderer element, <my-table-renderer-text>, inside a generic <my-table-cell>. This avoids the custom register method, but it's harder to write and results in more elements and more boilerplate code, which in turn means a performance hit.
A mix of both, where the user writes <my-table-cell type="text"> and the cell uses something like document.createElement('my-table-rendener-'+ type) internally. This keeps the simpler syntax of option 1, while still avoiding the custom register method, but it has the same performance implications of option 2.

Can you suggest any better alternatives? Am I missing anything?

Do you want to design custom elements with the v0 or v1 spec? — Supersharp
– Supersharp, Commented Jan 11, 2017 at 9:13
I'm happy with both. Currently using v0, until more browsers add native support for v1. As far as I can tell, both specs have the same limitation of not being able to use is to extend custom elements — Dogoku
– Dogoku, Commented Jan 11, 2017 at 9:15
Note: Table elements must not have a shadow DOM. This make a custom element extending a table element a bit useless. — ceving
– ceving, Commented Mar 27, 2024 at 7:57

Supersharp · Accepted Answer · 2018-11-07 22:56:44Z

7

What could be done is using <td> Customized Built-in Element:

<table is="data-table>
   <tr>
       <td is="data-string">Bob</td>
       <td is="data-date">11/1/2017</td>
       <td is="data-number">44<td>
   </tr>
</table>

All extensions share the same prototype ancestor. Example:

//common cell
class DataCell extends HTMLTableCellElement {...}

//typed cell
class StringCell extends DataCell {
    renderContent() { ... }
} 
customElements.define( 'data-string', StringCell, { extends: 'td' } )

This way all cells extend the same <td> element, share a common prototype but have their own method implementations.

You can override shared method, and shared method can call specific method of the derived prototype object.

See a running example here:

//table
class DataTable extends HTMLTableElement {
    constructor() { 
        super()
        console.info( 'data-table created' )
    }
} 
customElements.define( 'data-table', DataTable, { extends: 'table' } );

//cell
class DataCell extends HTMLTableCellElement {
    connectedCallback() { 
        console.info( 'cell connected' )
        if ( typeof this.renderContent === 'function' ) 
            this.renderContent()
    }
} 

//cell string
class StringCell extends DataCell {
    renderContent()
    {
        console.info( 'data-string render' )
        this.innerHTML = '"' + this.textContent.trim() + '"'
    }
} 
customElements.define( 'data-string', StringCell, { extends: 'td' } )

table {
    border-collapse: collapse ;
}
td, th {
    border: 1px solid gray ;
    padding: 2px
}

<h4>Test Table Extension v1</h4>
<table is="data-table">
    <tr>
        <th>Id      <th>Name    <th>Age
    <tr>    
        <td>1       <td is="data-string">An      <td>20
    <tr>
        <td>2       <td is="data-string">Bob     <td>31

Note: If you don't want type extension you can also do it with custom tags. The idea is to have a common prototype and different custom elements that share it (thanks to standard prototype inheritance).

edited Nov 7, 2018 at 22:56

answered Jan 11, 2017 at 9:31

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dogoku Over a year ago

I dont understand your note at the bottom. Using custom tags is my existing solution (my common prototype is MyTableCell as mentioned above). This works for sharing functionality, but has the styling issue that i'm trying to avoid, since all cell types define their own tags.

Supersharp Over a year ago

My node was about behaviour. As far as styling is concerned, with custom tags, use a single element <table-cell> . It still differs from your #2-3 solution because you don't need to insert a custom element inside.

Supersharp · Accepted Answer · 2017-01-11 13:28:48Z

3

NB: This answer is separeted from the other as it's quite extensive by itself and totally independant.

If you use Autonomous Custom Elements (i.e. custom tags) with a (optionnal) type attribute:

<data-table>
    <data-row>    
        <data-cell>1</data-cell>       
        <data-cell type="string">An</data-cell>
        <data-cell type="number">20</data-cell>
    </data-row>
</data-table>

...you could use the MVC pattern:

define a class for the generic cell View (and/or Model)
define a subclass for the specialized Views (Date, Number, String)

Example with generic and string view:

class CellView {
    constructor ( view ) {
        this.view = view
    }
    render () {
        //default rendering
    }       
}

//String View
class CellStringView extends CellView {
    render () {
        console.info( 'special rendering', this.view )
        this.view.innerHTML = '"' + this.view.textContent + '"'
    }
}

In the custom element definition (which can be viewed as the Controller):

on creation, instantiate the View (or Model).
when you want to render the cell (or process the data), call the (overridden, or not) method of the View (or Model).

Example with a Custom Element v1 class:

class CellElement extends HTMLElement {
    constructor () {
        super()
        //create cell
        switch ( this.getAttribute( 'type' ) )
        {
            case 'string': 
                this.view = new CellStringView( this ) 
                break

            default:
                this.view = new CellView( this )
        }
    }
    connectedCallback () {
        //render cell
        this.view.render()
    }
}

Below is a live snippet:

//View (MVC View)
class CellView {
  constructor(view) {
    this.view = view
  }
  render() {}
}

//String View
class CellStringView extends CellView {
  render() {
    console.info('special rendering', this.view)
    this.view.innerHTML = '"' + this.view.textContent + '"'
  }
}

//Element (MVC controller)
class CellElement extends HTMLElement {
  constructor() {
    super()
    //create cell
    switch (this.getAttribute('type')) {
      case 'string':
        this.view = new CellStringView(this)
        break

      default:
        this.view = new CellView(this)
    }
  }
  connectedCallback() {
    //render cell
    this.view.render()
  }
}
customElements.define('data-cell', CellElement)

data-table {
  display: table ;
  border-collapse: collapse ;
  border: 1px solid gray ;
}

data-row {
  display: table-row ;
}

data-cell {
  display: table-cell ;
  border: 1px solid #ccc ;
  padding: 2px ;
}

<h4>Custom Table v1</h4>
<data-table>
  <data-row>
    <data-cell>Id</data-cell>
    <data-cell>Name</data-cell>
    <data-cell>Age</data-cell>
  </data-row>
  <data-row>
    <data-cell>1</data-cell>
    <data-cell type="string">An</data-cell>
    <data-cell>20</data-cell>
  </data-row>
  <data-row>
    <data-cell>2</data-cell>
    <data-cell type="string">Bob</data-cell>
    <data-cell>31</data-cell>
  </data-row>
</data-table>

answered Jan 11, 2017 at 13:28

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

3 Comments

Dogoku Over a year ago

This is essentially the same as option 1 in my example, with the difference that the views are predefined in that switch statement. As with option 1, If you want to allow users to define their own views, you need a way of registering views, so that the CellElement can instantiate them. Your previous answer doesn't have to deal with that, since the views are natively registered as extensions of td

Dogoku Over a year ago

Thank you for your time spent writing 2 different, very detailed answers. I started this question, more as discussion, in what appears to be a use case of custom elements, that either was missed by the architects or they decided it was not worth supporting.

Supersharp Over a year ago

Yes it's your option 1 implemented with MVC. I suppose they decided not to support it because it can be achieved natively with standard prototype (or class) inheritance (or to keep it simple).

Collectives™ on Stack Overflow

Create a Custom Element with different sub-types

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related