[Malleys]

Тот код, который указан в посте №24, структуру его скипта кратко можно представить так:

class Box {}
class EditableTable extends HTMLTableElement {}
customElements.define("editable-table", EditableTable, { extends: "table" });

Эти определения должны идти раньше всего.

div.innerHTML = `<table is="editable-table">${code}</table>`;

Да, вы можете вставлять код таким образом, но только наблюдатель изменении не узнает ничего о вставленных ячейках, поскольку в div вставляется готовая таблица со всеми ячейками сразу.

Я добавил статичный метод _addedCellAction, в котором описывается что делать с новоявленной ячейкой. Он вызывается наблюдателем изменении (вслучае если добавили динамически к существующей таблице новую ячейку) и в тот момент, когда таблица только что была подключена к DOM (берутся все её ячейки, происходит, например, когда таблица вставляется при помощи innerHTML) Да, теперь вы можете вставлять код таким образом

div.innerHTML = `<table is="editable-table">${code}</table>`;

document.createElement('table');

Метод createElement конструирует HTML основываясь на информации, переданной ему в параметрах. На основании этх параметров ('table') делается вывод, что нужен конструктор HTMLTableElement. Т. е. создаётся обычная таблица. Добавление атрибута is не может магическим образом подменить конструктор. По сути оно срабатывало, когда тег table и атрибут is="editable-table" были указаны вместе. Если вы инспектировали через консоль, то наверняка заметили, что у данной таблицы <table is="editable-table"> конструктором является EditableTable, а не HTMLTableElement. Когда вы вызываете document.createElement('table'); вы получаете экземпляр класса HTMLTableElement. Значит нужно сконструировать таблицу так, чтобы она была экземпляром класса EditableTable.

Самый простой вариант: используйте конструктор напрямую new EditableTable();, если вы хотите использовать метод сreateElement, то нужен дополнительный параметр document.createElement('table', { is: "editable-table" });

А выделение можно ограничить чтоб оно за пределы таблицы не вылазило или я губешку раскатал и мне стоит написать цикл который будет закатывать её обратно?

Добавил к вспомогательному классу Box метод unionintersection, который вычисляет пересечение областей. Конкретно используется для вычисления пересечения вычисленной области с областью, которую занимает таблица.

Вот карскас из моего приложения который генерирует и вставляет таблицу

Я его чуток переделал, как класс MyTableApp, вот что на данный момент
jsfiddle.net/Malleys/3b4r7mqs

SOS это вообще-то правильней intersection назвать, а не union, исправил