Поддержка веб-компонента Tabulator Table

Question

Я хотел бы использовать очень красивую таблицу javascript Tabulator ( http://tabulator.info/) в веб-компоненте.

Тем не менее, похоже, что основной экземпляр Tabulator может быть создан только через HTML-селектор, например так:

var table = new Tabulator("#example-table", {...});

К сожалению выглядит как #example-table не виден в тени вебкомпонентов:

class WcProjects extends HTMLElement {
    constructor() {
        super();
        // Attach a shadow root to the element.
        let shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = `<div id="example-table"></div>`;
}
connectedCallback() {
    var table = new Tabulator("#example-table", {...});
}

Есть ли другой способ создания таблицы Tabulator?

Буду признателен за любую оказанную помощь.

Answer 1

Конструктор Tabulator принимает селектор или узел DOM в элемент конструктора таблицы, то есть:

var tableHolder = document.createElement("div");
var table = new Tabulator(tableHolder , {...});

так что, пока у вас есть доступ к этому узлу, который должен предоставить вам ваш компонент, вы можете передать его в конструктор