feat(config-provider): fix style mount target prop

CHANGELOG.en-US.md

@@ -24,6 +24,7 @@
 - `n-slider` `marks` prop to support render function, closes [#5967](https://github.com/tusen-ai/naive-ui/issues/5967)
 - `n-transfer` `source-title` `target-title` prop to support render function, closes [#6004](https://github.com/tusen-ai/naive-ui/issues/6004)
 - `n-empty` `size` prop to support `tiny` size.
+- `n-config-provider` adds `style-mount-target` prop to control where to mount components' style.
 
 ## 2.39.0
 

CHANGELOG.zh-CN.md

@@ -24,7 +24,7 @@
 - `n-slider` `marks` 支持渲染函数，关闭 [#5967](https://github.com/tusen-ai/naive-ui/issues/5967)
 - `n-transfer` `source-title` `target-title` 支持渲染函数，关闭 [#6004](https://github.com/tusen-ai/naive-ui/issues/6004)
 - `n-empty` `size` 支持 `tiny` 尺寸
-- `n-config-provider` 新增 `style-mount-parent` 属性，将传递给 css-render 的 mount 的 parent，用来解决在 shadow dom 中样式无法生效的问题
+- `n-config-provider` 新增 `style-mount-target` 属性，用于控制样式的挂载位置
 
 ## 2.39.0
 

src/_mixins/use-css-vars-class.ts

@@ -17,10 +17,10 @@ export function useThemeClass(
   if (!cssVarsRef)
     throwError('useThemeClass', 'cssVarsRef is not passed')
 
-  const mergedThemeHashRef = inject(
-    configProviderInjectionKey,
-    null
-  )?.mergedThemeHashRef
+  const NConfigProvider = inject(configProviderInjectionKey, null)
+
+  const mergedThemeHashRef = NConfigProvider?.mergedThemeHashRef
+  const styleMountTarget = NConfigProvider?.styleMountTarget
 
   const themeClassRef = ref('')
 
@@ -53,7 +53,8 @@ export function useThemeClass(
       }
       c(`.${finalThemeHash}`, style).mount({
         id: finalThemeHash,
-        ssr: ssrAdapter
+        ssr: ssrAdapter,
+        parent: styleMountTarget
       })
       renderCallback = undefined
     }

src/_mixins/use-rtl.ts

@@ -5,8 +5,8 @@ import type {
   RtlEnabledState,
   RtlItem
 } from '../config-provider/src/internal-interface'
-import { cssrAnchorMetaName } from './common'
 import { configProviderInjectionKey } from '../config-provider/src/context'
+import { cssrAnchorMetaName } from './common'
 
 export function useRtl(
   mountId: string,
@@ -48,7 +48,7 @@ export function useRtl(
           bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
         },
         ssr: ssrAdapter,
-        parent: NConfigProvider?.styleMountParent
+        parent: NConfigProvider?.styleMountTarget
       })
     })
   }

src/_mixins/use-style.ts

@@ -28,15 +28,15 @@ export default function useStyle(
         bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
       },
       ssr: ssrAdapter,
-      parent: NConfigProvider?.styleMountParent
+      parent: NConfigProvider?.styleMountTarget
     })
     if (!NConfigProvider?.preflightStyleDisabled) {
       globalStyle.mount({
         id: 'n-global',
         head: true,
         anchorMetaName: cssrAnchorMetaName,
         ssr: ssrAdapter,
-        parent: NConfigProvider?.styleMountParent
+        parent: NConfigProvider?.styleMountTarget
       })
     }
   }

src/_mixins/use-theme.ts

@@ -104,15 +104,15 @@ function useTheme<N, T, R>(
         },
         anchorMetaName: cssrAnchorMetaName,
         ssr: ssrAdapter,
-        parent: NConfigProvider?.styleMountParent
+        parent: NConfigProvider?.styleMountTarget
       })
       if (!NConfigProvider?.preflightStyleDisabled) {
         globalStyle.mount({
           id: 'n-global',
           head: true,
           anchorMetaName: cssrAnchorMetaName,
           ssr: ssrAdapter,
-          parent: NConfigProvider?.styleMountParent
+          parent: NConfigProvider?.styleMountTarget
         })
       }
     }

src/config-provider/demos/enUS/index.demo-entry.md

@@ -32,6 +32,7 @@ inline-theme-disabled.vue
 | locale | `Locale \| null` | `undefined` | The locale object to be consumed by its child. If set to `null` it will use the default `enUS` locale. If set to `undefined` it will inherit its parent `n-config-provider`. |  |
 | namespace | `string` | `undefined` | Class name of detached parts of components inside `n-config-provider` |  |
 | preflight-style-disabled | `boolean` | `false` | Whether to disabled preflight style of naive-ui. If you disable it, you can take control of all global css. Also you can use `n-global-style` to apply global style (which is recommend since global style will be reactive). | 2.29.0 |
+| style-mount-target | `ParentNode` | `undefined` | Mounting target of style elements of components. | NEXT_VERSION |
 | tag | `string` | `'div'` | What tag `n-config-provider` will be rendered as |  |
 | theme | `Theme \| null` | `undefined` | The theme object to be consumed by its child. If set to `null` it will use the default light theme. If set to `undefined` it will inherit its parent `n-config-provider`. For more details please see [Customizing Theme](../docs/customize-theme). |  |
 | theme-overrides | `ThemeOverrides \| null` | `undefined` | The theme vars overrides to be consumed by its child. If set to `null` it will clear all theme vars. If set to `undefined` it will inherit its parent `n-config-provider`. For more details please see [Customizing Theme](../docs/customize-theme). |  |

src/config-provider/demos/zhCN/index.demo-entry.md

@@ -32,6 +32,7 @@ inline-theme-disabled.vue
 | locale | `Locale \| null` | `undefined` | 对后代组件生效的语言对象，为 `null` 时会使用默认 `enUS`，为 `undefined` 时会继承上级 `n-config-provider` |  |
 | namespace | `string` | `undefined` | `n-config-provider` 内部组件被卸载于其他位置的 DOM 的类名 |  |
 | preflight-style-disabled | `boolean` | `false` | 是否禁用默认样式，如果你禁用了它，便可以完全控制全局样式。你也可以使用 `n-global-style` 去挂载全局样式（推荐，样式是响应式的） | 2.29.0 |
+| style-mount-target | `ParentNode` | `undefined` | 组件样式的挂载位置 | NEXT_VERSION |
 | tag | `string` | `'div'` | `n-config-provider` 被渲染成的元素 |  |
 | theme | `Theme \| null` | `undefined` | 对后代组件生效的主题对象，为 `null` 时会使用默认亮色，为 `undefined` 时会继承上级 `n-config-provider`。更多信息参见[调整主题](../docs/customize-theme) |  |
 | theme-overrides | `ThemeOverrides \| null` | `undefined` | 对后代组件生效的主题变量覆盖，为 `null` 时会清除全部覆盖变量，为 `undefined` 时会继承上级 `n-config-provider`。更多信息参见[调整主题](../docs/customize-theme) |  |

src/config-provider/src/ConfigProvider.ts

@@ -52,7 +52,7 @@ export const configProviderProps = {
   icons: Object as PropType<GlobalIconConfig>,
   breakpoints: Object as PropType<Breakpoints>,
   preflightStyleDisabled: Boolean,
-  styleMountParent: Object as PropType<ParentNode | null>,
+  styleMountTarget: Object as PropType<ParentNode | null>,
   inlineThemeDisabled: {
     type: Boolean,
     default: undefined
@@ -166,8 +166,8 @@ export default defineComponent({
       = props.inlineThemeDisabled || NConfigProvider?.inlineThemeDisabled
     const preflightStyleDisabled
       = props.preflightStyleDisabled || NConfigProvider?.preflightStyleDisabled
-    const styleMountParent
-      = props.styleMountParent || NConfigProvider?.styleMountParent
+    const styleMountTarget
+      = props.styleMountTarget || NConfigProvider?.styleMountTarget
     const mergedThemeHashRef = computed(() => {
       const { value: theme } = mergedThemeRef
       const { value: mergedThemeOverrides } = mergedThemeOverridesRef
@@ -228,7 +228,7 @@ export default defineComponent({
       mergedThemeOverridesRef,
       inlineThemeDisabled: inlineThemeDisabled || false,
       preflightStyleDisabled: preflightStyleDisabled || false,
-      styleMountParent
+      styleMountTarget
     })
     return {
       mergedClsPrefix: mergedClsPrefixRef,

src/config-provider/src/internal-interface.ts

@@ -268,5 +268,5 @@ export interface ConfigProviderInjection {
   // non-reactive
   inlineThemeDisabled: boolean
   preflightStyleDisabled: boolean
-  styleMountParent?: ParentNode
+  styleMountTarget: ParentNode | undefined
 }

src/data-table/src/TableParts/Body.tsx

@@ -31,6 +31,7 @@ import {
 } from '../interface'
 import { createRowClassName, getColKey, isColumnSorting } from '../utils'
 import type { ColItem } from '../use-group-header'
+import { configProviderInjectionKey } from '../../../config-provider/src/context'
 import Cell from './Cell'
 import ExpandTrigger from './ExpandTrigger'
 import RenderSafeCheckbox from './BodyCheckbox'
@@ -192,6 +193,7 @@ export default defineComponent({
       doUncheck,
       renderCell
     } = inject(dataTableInjectionKey)!
+    const NConfigProvider = inject(configProviderInjectionKey)
     const scrollbarInstRef = ref<ScrollbarInst | null>(null)
     const virtualListRef = ref<VirtualListInst | null>(null)
     const emptyElRef = ref<HTMLElement | null>(null)
@@ -428,13 +430,15 @@ export default defineComponent({
         id: `n-${componentId}`,
         force: true,
         props: cProps,
-        anchorMetaName: cssrAnchorMetaName
+        anchorMetaName: cssrAnchorMetaName,
+        parent: NConfigProvider?.styleMountTarget
       })
       fixedStyleMounted = true
     })
     onUnmounted(() => {
       style.unmount({
-        id: `n-${componentId}`
+        id: `n-${componentId}`,
+        parent: NConfigProvider?.styleMountTarget
       })
     })
     return {

src/empty/src/Empty.tsx

@@ -3,10 +3,8 @@ import {
   type VNodeChild,
   computed,
   defineComponent,
-  h,
-  inject
+  h
 } from 'vue'
-import { configProviderInjectionKey } from '../../config-provider/src/context'
 import { NBaseIcon } from '../../_internal/icon'
 import { EmptyIcon } from '../../_internal/icons'
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins'
@@ -41,7 +39,8 @@ export default defineComponent({
   name: 'Empty',
   props: emptyProps,
   setup(props) {
-    const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
+    const { mergedClsPrefixRef, inlineThemeDisabled, mergedComponentPropsRef }
+      = useConfig(props)
     const themeRef = useTheme(
       'Empty',
       '-empty',
@@ -51,16 +50,14 @@ export default defineComponent({
       mergedClsPrefixRef
     )
     const { localeRef } = useLocale('Empty')
-    const NConfigProvider = inject(configProviderInjectionKey, null)
     const mergedDescriptionRef = computed(() => {
       return (
-        props.description
-        ?? NConfigProvider?.mergedComponentPropsRef.value?.Empty?.description
+        props.description ?? mergedComponentPropsRef?.value?.Empty?.description
       )
     })
     const mergedRenderIconRef = computed(
       () =>
-        NConfigProvider?.mergedComponentPropsRef.value?.Empty?.renderIcon
+        mergedComponentPropsRef?.value?.Empty?.renderIcon
         || (() => <EmptyIcon />)
     )
     const cssVarsRef = computed(() => {

themes/tusimple/src/TsConfigProvider.tsx

@@ -1,24 +1,24 @@
 import {
-  h,
+  type PropType,
   defineComponent,
+  h,
   onBeforeUnmount,
-  type PropType,
   toRef,
   watch
 } from 'vue'
 import { NConfigProvider, configProviderProps } from 'naive-ui'
 import { merge } from 'lodash-es'
+import type { CNode } from 'css-render'
 import { renderFilter, renderSorter } from './data-table'
-import { unconfigurableStyle, mountSvgDefs } from './unconfigurable-style-light'
+import { mountSvgDefs, unconfigurableStyle } from './unconfigurable-style-light'
 import {
-  unconfigurableStyle as unconfigurableDarkStyle,
-  mountSvgDefs as mountSvgDarkDefs
+  mountSvgDefs as mountSvgDarkDefs,
+  unconfigurableStyle as unconfigurableDarkStyle
 } from './unconfigurable-style-dark'
 
 import { themeOverridesLight } from './theme-overrides-light'
 import { themeOverridesDark } from './theme-overrides-dark'
 import { icons as tusimpleIcons } from './icons'
-import { type CNode } from 'css-render'
 
 const tusimpleComponentOptions = {
   Pagination: {
@@ -48,23 +48,23 @@ export default defineComponent({
     },
     ...configProviderProps
   },
-  setup (props) {
+  setup(props) {
     let currentUnconfigurableStyle: CNode | null = null
-    function mountLightTheme (): void {
+    function mountLightTheme(): void {
       mountSvgDefs()
       currentUnconfigurableStyle = unconfigurableStyle
       unconfigurableStyle.mount({
         id: 'naive-ui/tusimple-theme'
       })
     }
-    function mountDarkTheme (): void {
+    function mountDarkTheme(): void {
       mountSvgDarkDefs()
       currentUnconfigurableStyle = unconfigurableDarkStyle
       unconfigurableDarkStyle.mount({
         id: 'naive-ui/tusimple-theme'
       })
     }
-    function unmountTheme (): void {
+    function unmountTheme(): void {
       if (currentUnconfigurableStyle) {
         currentUnconfigurableStyle.unmount()
       }
@@ -75,7 +75,8 @@ export default defineComponent({
         if (themeName === 'light') {
           unmountTheme()
           mountLightTheme()
-        } else {
+        }
+        else {
           unmountTheme()
           mountDarkTheme()
         }
@@ -88,11 +89,11 @@ export default defineComponent({
       unmountTheme()
     })
   },
-  render () {
+  render() {
     const { $props } = this
     const { themeOverrides, componentOptions, icons, themeName } = $props
-    const tusimpleThemeOverrides =
-      themeName === 'light' ? themeOverridesLight : themeOverridesDark
+    const tusimpleThemeOverrides
+      = themeName === 'light' ? themeOverridesLight : themeOverridesDark
     return (
       <NConfigProvider
         class={`ts-${themeName}-theme`}