Рендерим таблицы с помощью Symbiote.js

[caballero]

Если речь о таблице то с помощью того же mustache делается гораздо проще.

Вот компоненты типа select2 переписать был бы здорово

[i360u]

Динамический рендеринг с помощью mustache? Серьезно?

[DarthVictor]

У таблиц ведь могут быть и фиксированные заголовки или столбцы и много чего ещё, что без JS нормально не сделаешь.

[alexnozer]

В таком варианте получается невалидная разметка таблицы. В table разрешено использовать только caption, colgroup, thead, tbody, tfoot, tr, template и script. Остальные элементы запрещены, в том числе и кастомные элементы. Добавление display: contents хоть и убирает элемент из расчёта раскладки, но технически он остаётся в DOM и AOM.

В итоге валидатор ругается и останавливает дальнейший анализ разметки, теряется семантика таблицы для ассистивных технологий, перестают работать API-методы таблиц (добавление строк, считывание данных и т.д.). Поэтому в таком варианте использования стоит делать всю таблицу на кастомных элементах и добавлять семантику через ARIA атрибуты или ARIA Reflection API.

[i360u]

Я, наверное, зря не сделал на этом дополнительный акцент, но в качестве элементов списка в itemize могут выступать Custom Elements созданные ЛЮБЫМ способом, что круто, само по себе. Например так:

class TableRow extends HTMLTableRowElement {

  constructor() {
    super();
    this.innerHTML = /*html*/ `<td></td><td></td>`;
  }

  set name(val) {
    this.cells.item(0).textContent = val;
  }

  set date(val) {
    this.cells.item(1).textContent = val;
  }
}

window.customElements.define('table-row', TableRow, {
  extends: 'tr',
});

В этом случае, все элементы таблицы будут абсолютно стандартными тегами со своими стандартными методами API. Но, придется использовать полифил для Safari:

import {} from 'https://cdn.jsdelivr.net/npm/@ungap/custom-elements/+esm';

[alexnozer]

Судя по примеру, речь идёт о Сustomized built-in elements (наследование от других существующих элементов, а не HTMLElement). Насколько мне известно, эта фича deprecated как раз из-за того, что у инженеров Safari нашлись причины не реализовывать это. Вслед за этим на собрании рабочей группы веб-компонентов API customized built-in elements было отклонено и со временем будет удалено из других браузеров. Поэтому я бы не стал полагаться на это, даже с полифилом.

Для валидности мне видится вариант сделать таблицу целиком на кастомных элементах + ARIA + display: table-*.