Web组件对制表器的支持

Question

我想在Web组件中使用非常漂亮的Tabulator（ http://tabulator.info/ ）javascript表。

但是，看起来主要的Tabulator实例只能通过html选择器创建，如下所示：

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

不幸的是，看起来#example-table在webcomponents的shadowDom中不可见：

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", {...});
}

还有另一种实例化制表器表的方法吗？

任何帮助深表感谢。

Answer 1

Tabulator构造函数将选择器或DOM节点接受到表的构造器元素中，即：

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

因此只要您有权访问组件应提供给您的那个节点，就可以将其传递给构造函数