如何获取Web Component中由customElement创建的对象实例？

你的自定义元素注册流程没有问题，完全符合规范。下面是对应问题的解决方案：

1. 如何获取Shadow DOM根节点 #

首先纠正一个认知误区：Web Component本身就是继承自HTMLElement的标准DOM元素，只要元素完成挂载（触发connectedCallback生命周期之后），完全可以正常调用this.getRootNode()获取所在的Shadow根，不需要只依赖document和window对象。
你可以直接在DataGrid类的connectedCallback钩子中获取根节点：

export default class DataGrid extends HTMLElement {    
    constructor() {
        super(); 
        const tmpl = document.createElement('template');
        tmpl.innerHTML = `<div id="lib-datagrid"></div>`;
        this._shadowRoot = this.attachShadow({mode: "open"});
        this._shadowRoot.appendChild(tmpl.content.cloneNode(true));
        this._rowData = [];
    }

    connectedCallback() {
        // 这里拿到的就是元素所在的Shadow根节点
        const root = this.getRootNode();
        console.log('Shadow根节点：', root);
    }
}
customElements.define('my-grid', DataGrid);

2. 如何向自定义表格元素传递数据 #

推荐以下两种方案，优先级从高到低：

方案1：暴露对外属性（最符合Web Component设计规范）

在类中定义可读写的对外属性，外部拿到实例直接赋值即可，和原生DOM元素的使用逻辑一致：

export default class DataGrid extends HTMLElement {    
    constructor() {
        super(); 
        const tmpl = document.createElement('template');
        tmpl.innerHTML = `<div id="lib-datagrid"></div>`;
        this._shadowRoot = this.attachShadow({mode: "open"});
        this._shadowRoot.appendChild(tmpl.content.cloneNode(true));
        this._rowData = [];
    }

    // 对外暴露rowData属性
    get rowData() {
        return this._rowData;
    }

    set rowData(value) {
        this._rowData = value;
        this.renderTable(); // 赋值后触发表格重渲染逻辑
    }

    renderTable() {
        // 你的原有表格渲染逻辑
    }
}
customElements.define('my-grid', DataGrid);

上层组件直接通过DOM引用给属性赋值即可，以React框架为例：

import { useRef, useEffect } from 'react';

export default (state) => {
    const { items, alert, loading } = state;
    const gridRef = useRef(null);

    // 数据变化时自动更新表格
    useEffect(() => {
        if (gridRef.current) {
            gridRef.current.rowData = items;
        }
    }, [items]);

    return (
        <div>       
            <div className="card-top">
                <my-grid ref={gridRef}></my-grid>
            </div>
        </div>
    );
};

其他框架同理，只要拿到<my-grid>的DOM实例，就可以直接给rowData属性赋值。

方案2：全局实例挂载（仅适合单实例场景）

就是你测试的思路，不需要内联写类，独立文件也可以实现：

// datagrid.js 独立文件
let globalGridInstance = null;

export default class DataGrid extends HTMLElement {    
    connectedCallback() {
        // 挂载时保存实例到全局变量
        globalGridInstance = this;
    }

    // 其他类逻辑同上
}
customElements.define('my-grid', DataGrid);

// 导出获取实例的方法
export const getGridInstance = () => globalGridInstance;

需要传数据时直接调用：

import { getGridInstance } from './datagrid.js'

getGridInstance()?.rowData = yourTableData

注意该方案仅适合页面内只有一个<my-grid>的场景，多实例会导致引用覆盖。

内容的提问来源于stack exchange，提问作者Dazed