From 71d2f85feaf5fcd852534116281b6b2aa7cdb112 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 22 Sep 2025 18:11:21 +0800 Subject: [PATCH 1/3] feat: add ShadowComponent to encapsulate shadow DOM rendering in table cells --- src/Body/MeasureCell.tsx | 5 ++++- src/Body/ShadowComponent.tsx | 26 ++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 src/Body/ShadowComponent.tsx diff --git a/src/Body/MeasureCell.tsx b/src/Body/MeasureCell.tsx index 1db7d06bb..abf0d03ae 100644 --- a/src/Body/MeasureCell.tsx +++ b/src/Body/MeasureCell.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import ResizeObserver from 'rc-resize-observer'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +import ShadowComponent from './ShadowComponent'; import type { ColumnType } from '../interface'; export interface MeasureCellProps { @@ -27,7 +28,9 @@ export default function MeasureCell({ return ( -
{column?.title || '\xa0'}
+ + {column?.title || '\xa0'} + ); diff --git a/src/Body/ShadowComponent.tsx b/src/Body/ShadowComponent.tsx new file mode 100644 index 000000000..3e52f682a --- /dev/null +++ b/src/Body/ShadowComponent.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { createPortal } from 'react-dom'; + +export default function ShadowComponent({ + children, + className, +}: { + children: React.ReactNode; + className: string; +}) { + const hostRef = React.useRef(null); + const [shadowRoot, setShadowRoot] = React.useState(null); + + React.useEffect(() => { + if (hostRef.current && !shadowRoot) { + const shadow = hostRef.current.attachShadow({ mode: 'open' }); + setShadowRoot(shadow); + } + }, [shadowRoot]); + + return ( +
+ {shadowRoot && createPortal(children, shadowRoot)} +
+ ); +} From 698a06605e4d10016961ecb5370be6835cf932e4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 22 Sep 2025 18:13:43 +0800 Subject: [PATCH 2/3] test: update snapshot tests for table measure cell content changes --- tests/__snapshots__/ExpandRow.spec.jsx.snap | 80 ++--- tests/__snapshots__/FixedColumn.spec.tsx.snap | 304 +++++------------- tests/__snapshots__/Table.spec.jsx.snap | 12 +- 3 files changed, 99 insertions(+), 297 deletions(-) diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap index 2d85db84f..c693bca3d 100644 --- a/tests/__snapshots__/ExpandRow.spec.jsx.snap +++ b/tests/__snapshots__/ExpandRow.spec.jsx.snap @@ -195,36 +195,28 @@ LoadedCheerio { >
-   -
+ />
- Name -
+ />
- Age -
+ />
- Gender -
+ />
-   -
+ />
- Name -
+ />
- Age -
+ />
- Gender -
+ />
-   -
+ />
- Name -
+ />
- Age -
+ />
- Gender -
+ />
-   -
+ />
- Name -
+ />
- Age -
+ />
- Gender -
+ />
- Name -
+ />
- Age -
+ />
- Gender -
+ />
-   -
+ />
- title1 -
+ />
- title2 -
+ />
- title3 -
+ />
- title4 -
+ />
- title5 -
+ />
- title6 -
+ />
- title7 -
+ />
- title8 -
+ />
- title9 -
+ />
- title10 -
+ />
- title11 -
+ />
- title12 -
+ />
- title1 -
+ />
- title2 -
+ />
- title3 -
+ />
- title4 -
+ />
- title5 -
+ />
- title6 -
+ />
- title7 -
+ />
- title8 -
+ />
- title9 -
+ />
- title10 -
+ />
- title11 -
+ />
- title12 -
+ />
- title1 -
+ />
- title2 -
+ />
- title3 -
+ />
- title4 -
+ />
- title5 -
+ />
- title6 -
+ />
- title7 -
+ />
- title8 -
+ />
- title9 -
+ />
- title10 -
+ />
- title11 -
+ />
- title12 -
+ />
- title1 -
+ />
- title2 -
+ />
- title3 -
+ />
- title4 -
+ />
- title5 -
+ />
- title6 -
+ />
- title7 -
+ />
- title8 -
+ />
- title9 -
+ />
- title10 -
+ />
- title11 -
+ />
- title12 -
+ />
- title1 -
+ />
- title2 -
+ />
- title3 -
+ />
- title4 -
+ />
- title5 -
+ />
- title6 -
+ />
- title7 -
+ />
- title8 -
+ />
- title9 -
+ />
- title10 -
+ />
- title11 -
+ />
- title12 -
+ /> shadow should be shown when there are columns where >
- Other -
+ />
- Name -
+ />
- Company -
+ />
- Gender -
+ /> shadow should display correctly 1`] = ` >
- Age -
+ />
- Street -
+ />
- Door No. -
+ />
- Building -
+ />
- Name -
+ />
- Company Address -
+ />
- Company Name -
+ />
- Gender -
+ /> shadow should display correctly 2`] = ` >
- Name0 -
+ />
- Name1 -
+ />
- Name2 -
+ />
- Name3 -
+ />
- Name -
+ />
- Age -
+ />
- Gender -
+ /> Date: Mon, 22 Sep 2025 18:16:32 +0800 Subject: [PATCH 3/3] feat: add shadow dom support check and fallback rendering --- src/Body/ShadowComponent.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/Body/ShadowComponent.tsx b/src/Body/ShadowComponent.tsx index 3e52f682a..420f5b7da 100644 --- a/src/Body/ShadowComponent.tsx +++ b/src/Body/ShadowComponent.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import { createPortal } from 'react-dom'; +function isShadowDomSupported() { + return typeof window !== 'undefined' && !!HTMLElement.prototype.attachShadow; +} + export default function ShadowComponent({ children, className, @@ -10,14 +14,29 @@ export default function ShadowComponent({ }) { const hostRef = React.useRef(null); const [shadowRoot, setShadowRoot] = React.useState(null); + const [shadowSupported, setShadowSupported] = React.useState(true); React.useEffect(() => { + // 检查是否支持 Shadow DOM + if (!isShadowDomSupported()) { + setShadowSupported(false); + return; + } if (hostRef.current && !shadowRoot) { const shadow = hostRef.current.attachShadow({ mode: 'open' }); setShadowRoot(shadow); } }, [shadowRoot]); + // 如果不支持 Shadow DOM，直接渲染 children + if (!shadowSupported) { + return ( +
+ {children} +
+ ); + } + return (
{shadowRoot && createPortal(children, shadowRoot)}