fix: 兼容Shadow DOM (#3186)

Alexzjt · web-flow · commit 58072d0cc140 · 2025-06-09T13:43:01.000+08:00
* fix: 兼容Shadow DOM

* test: 兼容Shadow DOM
diff --git a/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts
@@ -45,6 +45,21 @@ describe('SpreadSheet Tests', () => {
       s2.destroy();
     });
 
+    test('should init sheet by shadow dom container', async () => {
+      const shadowRoot = container.attachShadow({ mode: 'open' });
+      const shadowDiv = document.createElement('div');
+
+      // 将其添加到 shadow root 上
+      shadowRoot.appendChild(shadowDiv);
+      const s2 = new PivotSheet(shadowDiv, mockDataConfig, s2Options);
+
+      await s2.render();
+
+      expect(s2.facet).toBeDefined();
+
+      s2.destroy();
+    });
+
     test('should generate header node by field value', async () => {
       const s2 = new PivotSheet(container, mockDataConfig, s2Options);
 
diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -423,10 +423,10 @@ export abstract class SpreadSheet extends EE {
 
   private async doRender(options?: S2RenderOptions) {
     // 防止表格卸载后, 再次调用 render 函数的报错
-    if (
-      !this.getCanvasElement() ||
-      !window.document.body.contains(this.getCanvasElement())
-    ) {
+    const canvasElement = this.getCanvasElement();
+
+    // 使用 isConnected 替代 body.contains 检查 DOM 连接状态，兼容Shadow DOM
+    if (!canvasElement || !canvasElement.isConnected) {
       return;
     }
 
