制表符表的 Web 组件支持答案

【问题标题】：Webcomponent support for Tabulator Table制表符表的 Web 组件支持
【发布时间】：2019-01-30 23:35:10
【问题描述】：

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

还有其他方法可以实例化 Tabulator 表吗？

非常感谢任何帮助。

【问题讨论】：

欢迎来到stackoverflow！展示你自己尝试过什么，遇到过什么问题。帮助社区为您提供帮助

标签： javascript web-component tabulator native-web-component

【解决方案1】：

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

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

只要你可以访问你的组件应该给你的那个节点，你就可以将它传递给构造函数

【讨论】：

完美运行。我尝试了这个，但代码中有一个小错误，并且该功能已记录在案。非常感谢！
它部分工作。 Tabulator 在某些地方使用了 document.body.appendChild()。所以新创建的元素对 shadow dom 是不可见的。例如。选择编辑器不起作用