Я работаю над собственным WebComponent, который представляет простую таблицу, количество строк и столбцов передается через атрибуты. Ширина столбцов, если фиксированная.
В случае, если у меня 20 столбцов и ширина столбца = 150 пикселей, мне нужно создать столько столбцов, сколько я могу разместить в родительском контейнере, не создавая y-переполнения.
вот как я создаю таблицу
...
this._root = this.attachShadow({mode: "open"});
...
_createTable() {
const parentWidth = this.getRootNode(); // how to get the width of parent container
console.log(222, parentWidth)
this._cells = [];
this._table = document.createElement('table');
for (let row = 0; row < this._rows; row++) {
const tr = document.createElement('tr');
this._table.appendChild(tr);
this._cells.push([]);
let totalWidth = 0;
for (let col = 0; col < this._cols; col++) {
// can we create a new cell/column
if (totalWidth + this._columnWidth > parentWidth)
break;
totalWidth += this._columnWidth;
const td = document.createElement('td');
td.innerText = `cell[${row}${col}]`;
tr.appendChild(td);
this._cells[row].push(td);
}
}
this._root.appendChild(this._table);
}
но я не мог найти способ, как из моего web-component получить родительскую ширину и присоединиться к его событию изменения размера.
Поскольку веб-компонент находится внутри теневого дома, я не могу получить доступ к родительскому объекту, возможно, я здесь ошибаюсь, но parentNode всегда возвращает null.
Идеи?
