From 89b4dd18a99b45268d255ae65674c6a8f9decfc9 Mon Sep 17 00:00:00 2001
From: tanghui <yoyo837@hotmail.com>
Date: Sat, 23 Dec 2023 21:10:54 +0800
Subject: [PATCH] feat: support link css from shadow dom

---
 packages/vant-cli/site/common/style/vars.less   | 3 ++-
 packages/vant/src/action-bar-button/index.less  | 3 ++-
 packages/vant/src/action-bar-icon/index.less    | 3 ++-
 packages/vant/src/action-bar/index.less         | 3 ++-
 packages/vant/src/action-sheet/index.less       | 3 ++-
 packages/vant/src/address-edit/index.less       | 3 ++-
 packages/vant/src/address-list/index.less       | 3 ++-
 packages/vant/src/back-top/index.less           | 3 ++-
 packages/vant/src/badge/index.less              | 3 ++-
 packages/vant/src/barrage/index.less            | 3 ++-
 packages/vant/src/button/index.less             | 3 ++-
 packages/vant/src/calendar/index.less           | 3 ++-
 packages/vant/src/card/index.less               | 3 ++-
 packages/vant/src/cascader/index.less           | 3 ++-
 packages/vant/src/cell-group/index.less         | 3 ++-
 packages/vant/src/cell/index.less               | 3 ++-
 packages/vant/src/checkbox/index.less           | 3 ++-
 packages/vant/src/circle/index.less             | 3 ++-
 packages/vant/src/collapse-item/index.less      | 3 ++-
 packages/vant/src/contact-card/index.less       | 3 ++-
 packages/vant/src/contact-edit/index.less       | 3 ++-
 packages/vant/src/contact-list/index.less       | 3 ++-
 packages/vant/src/count-down/index.less         | 3 ++-
 packages/vant/src/coupon-cell/index.less        | 3 ++-
 packages/vant/src/coupon-list/index.less        | 3 ++-
 packages/vant/src/coupon/index.less             | 3 ++-
 packages/vant/src/dialog/index.less             | 3 ++-
 packages/vant/src/divider/index.less            | 3 ++-
 packages/vant/src/dropdown-item/index.less      | 3 ++-
 packages/vant/src/dropdown-menu/index.less      | 3 ++-
 packages/vant/src/empty/index.less              | 3 ++-
 packages/vant/src/field/index.less              | 3 ++-
 packages/vant/src/floating-bubble/index.less    | 3 ++-
 packages/vant/src/floating-panel/index.less     | 3 ++-
 packages/vant/src/grid-item/index.less          | 3 ++-
 packages/vant/src/highlight/index.less          | 3 ++-
 packages/vant/src/image-preview/index.less      | 3 ++-
 packages/vant/src/image/index.less              | 3 ++-
 packages/vant/src/index-anchor/index.less       | 3 ++-
 packages/vant/src/index-bar/index.less          | 3 ++-
 packages/vant/src/list/index.less               | 3 ++-
 packages/vant/src/loading/index.less            | 3 ++-
 packages/vant/src/nav-bar/index.less            | 3 ++-
 packages/vant/src/notice-bar/index.less         | 3 ++-
 packages/vant/src/notify/index.less             | 3 ++-
 packages/vant/src/number-keyboard/index.less    | 3 ++-
 packages/vant/src/overlay/index.less            | 3 ++-
 packages/vant/src/pagination/index.less         | 3 ++-
 packages/vant/src/password-input/index.less     | 3 ++-
 packages/vant/src/picker-group/index.less       | 3 ++-
 packages/vant/src/picker/index.less             | 3 ++-
 packages/vant/src/popover/index.less            | 3 ++-
 packages/vant/src/popup/index.less              | 3 ++-
 packages/vant/src/progress/index.less           | 3 ++-
 packages/vant/src/pull-refresh/index.less       | 3 ++-
 packages/vant/src/radio/index.less              | 3 ++-
 packages/vant/src/rate/index.less               | 3 ++-
 packages/vant/src/rolling-text/index.less       | 3 ++-
 packages/vant/src/search/index.less             | 3 ++-
 packages/vant/src/share-sheet/index.less        | 3 ++-
 packages/vant/src/sidebar-item/index.less       | 3 ++-
 packages/vant/src/sidebar/index.less            | 3 ++-
 packages/vant/src/signature/index.less          | 3 ++-
 packages/vant/src/skeleton-avatar/index.less    | 3 ++-
 packages/vant/src/skeleton-image/index.less     | 3 ++-
 packages/vant/src/skeleton-paragraph/index.less | 3 ++-
 packages/vant/src/skeleton-title/index.less     | 3 ++-
 packages/vant/src/skeleton/index.less           | 3 ++-
 packages/vant/src/slider/index.less             | 3 ++-
 packages/vant/src/step/index.less               | 3 ++-
 packages/vant/src/stepper/index.less            | 3 ++-
 packages/vant/src/steps/index.less              | 3 ++-
 packages/vant/src/sticky/index.less             | 3 ++-
 packages/vant/src/style/css-variables.less      | 3 ++-
 packages/vant/src/submit-bar/index.less         | 3 ++-
 packages/vant/src/swipe/index.less              | 3 ++-
 packages/vant/src/switch/index.less             | 3 ++-
 packages/vant/src/tabbar-item/index.less        | 3 ++-
 packages/vant/src/tabbar/index.less             | 3 ++-
 packages/vant/src/tabs/index.less               | 3 ++-
 packages/vant/src/tag/index.less                | 3 ++-
 packages/vant/src/text-ellipsis/index.less      | 3 ++-
 packages/vant/src/toast/index.less              | 3 ++-
 packages/vant/src/tree-select/index.less        | 3 ++-
 packages/vant/src/uploader/index.less           | 3 ++-
 packages/vant/src/watermark/index.less          | 3 ++-
 86 files changed, 172 insertions(+), 86 deletions(-)

diff --git a/packages/vant-cli/site/common/style/vars.less b/packages/vant-cli/site/common/style/vars.less
index 7d9f6d7a96e..a336afa087e 100644
--- a/packages/vant-cli/site/common/style/vars.less
+++ b/packages/vant-cli/site/common/style/vars.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   // colors
   --van-doc-black: #000;
   --van-doc-white: #fff;
diff --git a/packages/vant/src/action-bar-button/index.less b/packages/vant/src/action-bar-button/index.less
index 8a519df7dfd..a3ee03760ab 100644
--- a/packages/vant/src/action-bar-button/index.less
+++ b/packages/vant/src/action-bar-button/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-action-bar-button-height: 40px;
   --van-action-bar-button-warning-color: var(--van-gradient-orange);
   --van-action-bar-button-danger-color: var(--van-gradient-red);
diff --git a/packages/vant/src/action-bar-icon/index.less b/packages/vant/src/action-bar-icon/index.less
index bbc52b48c89..ee4c8c7a94b 100644
--- a/packages/vant/src/action-bar-icon/index.less
+++ b/packages/vant/src/action-bar-icon/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-action-bar-icon-width: 48px;
   --van-action-bar-icon-height: 100%;
   --van-action-bar-icon-color: var(--van-text-color);
diff --git a/packages/vant/src/action-bar/index.less b/packages/vant/src/action-bar/index.less
index b0bdbd8dc11..41d40160b29 100644
--- a/packages/vant/src/action-bar/index.less
+++ b/packages/vant/src/action-bar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-action-bar-background: var(--van-background-2);
   --van-action-bar-height: 50px;
 }
diff --git a/packages/vant/src/action-sheet/index.less b/packages/vant/src/action-sheet/index.less
index 926b881ceb7..102ba503d01 100644
--- a/packages/vant/src/action-sheet/index.less
+++ b/packages/vant/src/action-sheet/index.less
@@ -1,6 +1,7 @@
 @import '../style/mixins/hairline';
 
-:root {
+:root,
+:host {
   --van-action-sheet-max-height: 80%;
   --van-action-sheet-header-height: 48px;
   --van-action-sheet-header-font-size: var(--van-font-size-lg);
diff --git a/packages/vant/src/address-edit/index.less b/packages/vant/src/address-edit/index.less
index 49cd59b5861..3c15b365d73 100644
--- a/packages/vant/src/address-edit/index.less
+++ b/packages/vant/src/address-edit/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-address-edit-padding: var(--van-padding-sm);
   --van-address-edit-buttons-padding: var(--van-padding-xl)
     var(--van-padding-base);
diff --git a/packages/vant/src/address-list/index.less b/packages/vant/src/address-list/index.less
index b3710b57a47..153bf2dd0b0 100644
--- a/packages/vant/src/address-list/index.less
+++ b/packages/vant/src/address-list/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
   --van-address-list-disabled-text-color: var(--van-text-color-2);
   --van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;
diff --git a/packages/vant/src/back-top/index.less b/packages/vant/src/back-top/index.less
index a61ca8ce3ff..e41a4a3d21e 100644
--- a/packages/vant/src/back-top/index.less
+++ b/packages/vant/src/back-top/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-back-top-size: 40px;
   --van-back-top-right: 30px;
   --van-back-top-bottom: 40px;
diff --git a/packages/vant/src/badge/index.less b/packages/vant/src/badge/index.less
index 4aa0083d959..822c7a811e5 100644
--- a/packages/vant/src/badge/index.less
+++ b/packages/vant/src/badge/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-badge-size: 16px;
   --van-badge-color: var(--van-white);
   --van-badge-padding: 0 3px;
diff --git a/packages/vant/src/barrage/index.less b/packages/vant/src/barrage/index.less
index 3435737d011..ac5636d47c5 100644
--- a/packages/vant/src/barrage/index.less
+++ b/packages/vant/src/barrage/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-barrage-font-size: 16px;
   --van-barrage-space: 10px;
   --van-barrage-font: inherit;
diff --git a/packages/vant/src/button/index.less b/packages/vant/src/button/index.less
index 6665e3d8df8..e7a74d55940 100644
--- a/packages/vant/src/button/index.less
+++ b/packages/vant/src/button/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-button-mini-height: 24px;
   --van-button-mini-padding: 0 var(--van-padding-base);
   --van-button-mini-font-size: var(--van-font-size-xs);
diff --git a/packages/vant/src/calendar/index.less b/packages/vant/src/calendar/index.less
index 0b4b82b482e..713acbe40de 100644
--- a/packages/vant/src/calendar/index.less
+++ b/packages/vant/src/calendar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-calendar-background: var(--van-background-2);
   --van-calendar-popup-height: 80%;
   --van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
diff --git a/packages/vant/src/card/index.less b/packages/vant/src/card/index.less
index aeed8cf0760..e6df283d0e3 100644
--- a/packages/vant/src/card/index.less
+++ b/packages/vant/src/card/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-card-padding: var(--van-padding-xs) var(--van-padding-md);
   --van-card-font-size: var(--van-font-size-sm);
   --van-card-text-color: var(--van-text-color);
diff --git a/packages/vant/src/cascader/index.less b/packages/vant/src/cascader/index.less
index c1a53d94f2c..79414b56062 100644
--- a/packages/vant/src/cascader/index.less
+++ b/packages/vant/src/cascader/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-cascader-header-height: 48px;
   --van-cascader-header-padding: 0 var(--van-padding-md);
   --van-cascader-title-font-size: var(--van-font-size-lg);
diff --git a/packages/vant/src/cell-group/index.less b/packages/vant/src/cell-group/index.less
index d0e0d0617ad..7bea6dfb40f 100644
--- a/packages/vant/src/cell-group/index.less
+++ b/packages/vant/src/cell-group/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-cell-group-background: var(--van-background-2);
   --van-cell-group-title-color: var(--van-text-color-2);
   --van-cell-group-title-padding: var(--van-padding-md) var(--van-padding-md);
diff --git a/packages/vant/src/cell/index.less b/packages/vant/src/cell/index.less
index b25dfe93980..5ec49a2ff03 100644
--- a/packages/vant/src/cell/index.less
+++ b/packages/vant/src/cell/index.less
@@ -1,6 +1,7 @@
 @import '../style/mixins/hairline';
 
-:root {
+:root,
+:host {
   --van-cell-font-size: var(--van-font-size-md);
   --van-cell-line-height: 24px;
   --van-cell-vertical-padding: 10px;
diff --git a/packages/vant/src/checkbox/index.less b/packages/vant/src/checkbox/index.less
index 9ef71cd7de9..08331dbaccb 100644
--- a/packages/vant/src/checkbox/index.less
+++ b/packages/vant/src/checkbox/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-checkbox-size: 20px;
   --van-checkbox-border-color: var(--van-gray-5);
   --van-checkbox-duration: var(--van-duration-fast);
diff --git a/packages/vant/src/circle/index.less b/packages/vant/src/circle/index.less
index 503d5f4842f..43f6f3f41ed 100644
--- a/packages/vant/src/circle/index.less
+++ b/packages/vant/src/circle/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-circle-size: 100px;
   --van-circle-color: var(--van-primary-color);
   --van-circle-layer-color: var(--van-white);
diff --git a/packages/vant/src/collapse-item/index.less b/packages/vant/src/collapse-item/index.less
index 90dff7527ac..5358dbe3c8a 100644
--- a/packages/vant/src/collapse-item/index.less
+++ b/packages/vant/src/collapse-item/index.less
@@ -1,6 +1,7 @@
 @import '../style/mixins/hairline';
 
-:root {
+:root,
+:host {
   --van-collapse-item-duration: var(--van-duration-base);
   --van-collapse-item-content-padding: var(--van-padding-sm)
     var(--van-padding-md);
diff --git a/packages/vant/src/contact-card/index.less b/packages/vant/src/contact-card/index.less
index 3fcc8f294f1..f2d94f9bc28 100644
--- a/packages/vant/src/contact-card/index.less
+++ b/packages/vant/src/contact-card/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-contact-card-padding: var(--van-padding-md);
   --van-contact-card-add-icon-size: 40px;
   --van-contact-card-add-icon-color: var(--van-primary-color);
diff --git a/packages/vant/src/contact-edit/index.less b/packages/vant/src/contact-edit/index.less
index fc384f9fe9e..fbac5a4bfe2 100644
--- a/packages/vant/src/contact-edit/index.less
+++ b/packages/vant/src/contact-edit/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-contact-edit-padding: var(--van-padding-md);
   --van-contact-edit-fields-radius: var(--van-radius-md);
   --van-contact-edit-buttons-padding: var(--van-padding-xl) 0;
diff --git a/packages/vant/src/contact-list/index.less b/packages/vant/src/contact-list/index.less
index c6f984e0fe0..8624a00b186 100644
--- a/packages/vant/src/contact-list/index.less
+++ b/packages/vant/src/contact-list/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-contact-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
   --van-contact-list-edit-icon-size: 16px;
   --van-contact-list-add-button-z-index: 999;
diff --git a/packages/vant/src/count-down/index.less b/packages/vant/src/count-down/index.less
index 064c7b0a291..1bee4ef57d4 100644
--- a/packages/vant/src/count-down/index.less
+++ b/packages/vant/src/count-down/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-count-down-text-color: var(--van-text-color);
   --van-count-down-font-size: var(--van-font-size-md);
   --van-count-down-line-height: var(--van-line-height-md);
diff --git a/packages/vant/src/coupon-cell/index.less b/packages/vant/src/coupon-cell/index.less
index 49c2a3d2be3..0041490b162 100644
--- a/packages/vant/src/coupon-cell/index.less
+++ b/packages/vant/src/coupon-cell/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-coupon-cell-selected-text-color: var(--van-text-color);
 }
 
diff --git a/packages/vant/src/coupon-list/index.less b/packages/vant/src/coupon-list/index.less
index aa626904206..a2460e804d1 100644
--- a/packages/vant/src/coupon-list/index.less
+++ b/packages/vant/src/coupon-list/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-coupon-list-background: var(--van-background);
   --van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
   --van-coupon-list-exchange-button-height: 32px;
diff --git a/packages/vant/src/coupon/index.less b/packages/vant/src/coupon/index.less
index e3c54402bcb..f30e9d1ae44 100644
--- a/packages/vant/src/coupon/index.less
+++ b/packages/vant/src/coupon/index.less
@@ -1,6 +1,7 @@
 @import '../style/mixins/ellipsis';
 
-:root {
+:root,
+:host {
   --van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
   --van-coupon-content-height: 84px;
   --van-coupon-content-padding: 14px 0;
diff --git a/packages/vant/src/dialog/index.less b/packages/vant/src/dialog/index.less
index ba52f9e0e0e..b8e1a0b8dca 100644
--- a/packages/vant/src/dialog/index.less
+++ b/packages/vant/src/dialog/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-dialog-width: 320px;
   --van-dialog-small-screen-width: 90%;
   --van-dialog-font-size: var(--van-font-size-lg);
diff --git a/packages/vant/src/divider/index.less b/packages/vant/src/divider/index.less
index d36a1f49a97..557bb324163 100644
--- a/packages/vant/src/divider/index.less
+++ b/packages/vant/src/divider/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-divider-margin: var(--van-padding-md) 0;
   --van-divider-vertical-margin: 0 var(--van-padding-xs);
   --van-divider-text-color: var(--van-text-color-2);
diff --git a/packages/vant/src/dropdown-item/index.less b/packages/vant/src/dropdown-item/index.less
index 0c7a78dbc10..a9bc7c5a37f 100644
--- a/packages/vant/src/dropdown-item/index.less
+++ b/packages/vant/src/dropdown-item/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-dropdown-item-z-index: 10;
 }
 
diff --git a/packages/vant/src/dropdown-menu/index.less b/packages/vant/src/dropdown-menu/index.less
index 87ff64bf617..e14ba0960e0 100644
--- a/packages/vant/src/dropdown-menu/index.less
+++ b/packages/vant/src/dropdown-menu/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-dropdown-menu-height: 48px;
   --van-dropdown-menu-background: var(--van-background-2);
   --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
diff --git a/packages/vant/src/empty/index.less b/packages/vant/src/empty/index.less
index 5e1ff308435..a7e73bacd3b 100644
--- a/packages/vant/src/empty/index.less
+++ b/packages/vant/src/empty/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-empty-padding: var(--van-padding-xl) 0;
   --van-empty-image-size: 160px;
   --van-empty-description-margin-top: var(--van-padding-md);
diff --git a/packages/vant/src/field/index.less b/packages/vant/src/field/index.less
index e461a90ed38..db5324dddfa 100644
--- a/packages/vant/src/field/index.less
+++ b/packages/vant/src/field/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-field-label-width: 6.2em;
   --van-field-label-color: var(--van-text-color);
   --van-field-label-margin-right: var(--van-padding-sm);
diff --git a/packages/vant/src/floating-bubble/index.less b/packages/vant/src/floating-bubble/index.less
index 8efd9ba1241..636ab2f00cf 100644
--- a/packages/vant/src/floating-bubble/index.less
+++ b/packages/vant/src/floating-bubble/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-floating-bubble-size: 48px;
   --van-floating-bubble-initial-gap: 24px;
   --van-floating-bubble-icon-size: 28px;
diff --git a/packages/vant/src/floating-panel/index.less b/packages/vant/src/floating-panel/index.less
index d7036e2bdbe..647ab5efe6a 100644
--- a/packages/vant/src/floating-panel/index.less
+++ b/packages/vant/src/floating-panel/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-floating-panel-border-radius: 16px;
   --van-floating-panel-header-height: 30px;
   --van-floating-panel-z-index: 999;
diff --git a/packages/vant/src/grid-item/index.less b/packages/vant/src/grid-item/index.less
index ffb54199952..6ceca4282da 100644
--- a/packages/vant/src/grid-item/index.less
+++ b/packages/vant/src/grid-item/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
   --van-grid-item-content-background: var(--van-background-2);
   --van-grid-item-content-active-color: var(--van-active-color);
diff --git a/packages/vant/src/highlight/index.less b/packages/vant/src/highlight/index.less
index af348dfaa5e..860b523d231 100644
--- a/packages/vant/src/highlight/index.less
+++ b/packages/vant/src/highlight/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-highlight-tag-color: var(--van-primary-color);
 }
 
diff --git a/packages/vant/src/image-preview/index.less b/packages/vant/src/image-preview/index.less
index b4e16de83fe..5ca9ca308c1 100644
--- a/packages/vant/src/image-preview/index.less
+++ b/packages/vant/src/image-preview/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-image-preview-index-text-color: var(--van-white);
   --van-image-preview-index-font-size: var(--van-font-size-md);
   --van-image-preview-index-line-height: var(--van-line-height-md);
diff --git a/packages/vant/src/image/index.less b/packages/vant/src/image/index.less
index 7a99b6907fe..8e6f4e324aa 100644
--- a/packages/vant/src/image/index.less
+++ b/packages/vant/src/image/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-image-placeholder-text-color: var(--van-text-color-2);
   --van-image-placeholder-font-size: var(--van-font-size-md);
   --van-image-placeholder-background: var(--van-background);
diff --git a/packages/vant/src/index-anchor/index.less b/packages/vant/src/index-anchor/index.less
index 02a41afeef7..58f868e573b 100644
--- a/packages/vant/src/index-anchor/index.less
+++ b/packages/vant/src/index-anchor/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-index-anchor-z-index: 1;
   --van-index-anchor-padding: 0 var(--van-padding-md);
   --van-index-anchor-text-color: var(--van-text-color);
diff --git a/packages/vant/src/index-bar/index.less b/packages/vant/src/index-bar/index.less
index f65cfb3e170..55e93ee3e59 100644
--- a/packages/vant/src/index-bar/index.less
+++ b/packages/vant/src/index-bar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-index-bar-sidebar-z-index: 2;
   --van-index-bar-index-font-size: var(--van-font-size-xs);
   --van-index-bar-index-line-height: var(--van-line-height-xs);
diff --git a/packages/vant/src/list/index.less b/packages/vant/src/list/index.less
index cf09171c3f2..7b3ec6f7f57 100644
--- a/packages/vant/src/list/index.less
+++ b/packages/vant/src/list/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-list-text-color: var(--van-text-color-2);
   --van-list-text-font-size: var(--van-font-size-md);
   --van-list-text-line-height: 50px;
diff --git a/packages/vant/src/loading/index.less b/packages/vant/src/loading/index.less
index 5c795d9fb7f..6a70e22b9f0 100644
--- a/packages/vant/src/loading/index.less
+++ b/packages/vant/src/loading/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-loading-text-color: var(--van-text-color-2);
   --van-loading-text-font-size: var(--van-font-size-md);
   --van-loading-spinner-color: var(--van-gray-5);
diff --git a/packages/vant/src/nav-bar/index.less b/packages/vant/src/nav-bar/index.less
index b966e0ee7f0..fa23eed64e0 100644
--- a/packages/vant/src/nav-bar/index.less
+++ b/packages/vant/src/nav-bar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-nav-bar-height: 46px;
   --van-nav-bar-background: var(--van-background-2);
   --van-nav-bar-arrow-size: 16px;
diff --git a/packages/vant/src/notice-bar/index.less b/packages/vant/src/notice-bar/index.less
index 1da435653f0..8368271c6f5 100644
--- a/packages/vant/src/notice-bar/index.less
+++ b/packages/vant/src/notice-bar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-notice-bar-height: 40px;
   --van-notice-bar-padding: 0 var(--van-padding-md);
   --van-notice-bar-wrapable-padding: var(--van-padding-xs) var(--van-padding-md);
diff --git a/packages/vant/src/notify/index.less b/packages/vant/src/notify/index.less
index 20c0ec8bd74..ab653fb9dd8 100644
--- a/packages/vant/src/notify/index.less
+++ b/packages/vant/src/notify/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-notify-text-color: var(--van-white);
   --van-notify-padding: var(--van-padding-xs) var(--van-padding-md);
   --van-notify-font-size: var(--van-font-size-md);
diff --git a/packages/vant/src/number-keyboard/index.less b/packages/vant/src/number-keyboard/index.less
index 29d06c853c7..2bd2c5f39dd 100644
--- a/packages/vant/src/number-keyboard/index.less
+++ b/packages/vant/src/number-keyboard/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-number-keyboard-background: var(--van-gray-2);
   --van-number-keyboard-key-height: 48px;
   --van-number-keyboard-key-font-size: 28px;
diff --git a/packages/vant/src/overlay/index.less b/packages/vant/src/overlay/index.less
index 22c0a35d7bb..dfb2eb27dd7 100644
--- a/packages/vant/src/overlay/index.less
+++ b/packages/vant/src/overlay/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-overlay-z-index: 1;
   --van-overlay-background: rgba(0, 0, 0, 0.7);
 }
diff --git a/packages/vant/src/pagination/index.less b/packages/vant/src/pagination/index.less
index 0f4e8d8567b..c6b1349ce85 100644
--- a/packages/vant/src/pagination/index.less
+++ b/packages/vant/src/pagination/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-pagination-height: 40px;
   --van-pagination-font-size: var(--van-font-size-md);
   --van-pagination-item-width: 36px;
diff --git a/packages/vant/src/password-input/index.less b/packages/vant/src/password-input/index.less
index c7133bb17cb..d5aa4da02ae 100644
--- a/packages/vant/src/password-input/index.less
+++ b/packages/vant/src/password-input/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-password-input-height: 50px;
   --van-password-input-margin: 0 var(--van-padding-md);
   --van-password-input-font-size: 20px;
diff --git a/packages/vant/src/picker-group/index.less b/packages/vant/src/picker-group/index.less
index 8e5512bb4f8..655a7fba1b0 100644
--- a/packages/vant/src/picker-group/index.less
+++ b/packages/vant/src/picker-group/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-picker-group-background: var(--van-background-2);
 }
 
diff --git a/packages/vant/src/picker/index.less b/packages/vant/src/picker/index.less
index 2f146d7894e..39c948bb43c 100644
--- a/packages/vant/src/picker/index.less
+++ b/packages/vant/src/picker/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-picker-background: var(--van-background-2);
   --van-picker-toolbar-height: 44px;
   --van-picker-title-font-size: var(--van-font-size-lg);
diff --git a/packages/vant/src/popover/index.less b/packages/vant/src/popover/index.less
index 87679bbf558..b28f97b3672 100644
--- a/packages/vant/src/popover/index.less
+++ b/packages/vant/src/popover/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-popover-arrow-size: 6px;
   --van-popover-radius: var(--van-radius-lg);
   --van-popover-action-width: 128px;
diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less
index 1730bbe9c25..706742938f8 100644
--- a/packages/vant/src/popup/index.less
+++ b/packages/vant/src/popup/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-popup-background: var(--van-background-2);
   --van-popup-transition: transform var(--van-duration-base);
   --van-popup-round-radius: 16px;
diff --git a/packages/vant/src/progress/index.less b/packages/vant/src/progress/index.less
index b26bb233d64..441a9fd1f4d 100644
--- a/packages/vant/src/progress/index.less
+++ b/packages/vant/src/progress/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-progress-height: 4px;
   --van-progress-color: var(--van-primary-color);
   --van-progress-inactive-color: var(--van-gray-5);
diff --git a/packages/vant/src/pull-refresh/index.less b/packages/vant/src/pull-refresh/index.less
index 8f2e2eba595..da1ccec3299 100644
--- a/packages/vant/src/pull-refresh/index.less
+++ b/packages/vant/src/pull-refresh/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-pull-refresh-head-height: 50px;
   --van-pull-refresh-head-font-size: var(--van-font-size-md);
   --van-pull-refresh-head-text-color: var(--van-text-color-2);
diff --git a/packages/vant/src/radio/index.less b/packages/vant/src/radio/index.less
index ba949601914..d1a341ac6ad 100644
--- a/packages/vant/src/radio/index.less
+++ b/packages/vant/src/radio/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-radio-size: 20px;
   --van-radio-dot-size: 8px;
   --van-radio-border-color: var(--van-gray-5);
diff --git a/packages/vant/src/rate/index.less b/packages/vant/src/rate/index.less
index 0a314ed003a..b0e2672c8c1 100644
--- a/packages/vant/src/rate/index.less
+++ b/packages/vant/src/rate/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-rate-icon-size: 20px;
   --van-rate-icon-gutter: var(--van-padding-base);
   --van-rate-icon-void-color: var(--van-gray-5);
diff --git a/packages/vant/src/rolling-text/index.less b/packages/vant/src/rolling-text/index.less
index a05dd42ffb7..4ee7505a791 100644
--- a/packages/vant/src/rolling-text/index.less
+++ b/packages/vant/src/rolling-text/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-rolling-text-background: inherit;
   --van-rolling-text-color: var(--van-text-color);
   --van-rolling-text-font-size: var(--van-font-size-md);
diff --git a/packages/vant/src/search/index.less b/packages/vant/src/search/index.less
index aaad67aa3a4..bea485cfc74 100644
--- a/packages/vant/src/search/index.less
+++ b/packages/vant/src/search/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-search-padding: 10px var(--van-padding-sm);
   --van-search-background: var(--van-background-2);
   --van-search-content-background: var(--van-background);
diff --git a/packages/vant/src/share-sheet/index.less b/packages/vant/src/share-sheet/index.less
index b7fced343ed..adc99c0f32b 100644
--- a/packages/vant/src/share-sheet/index.less
+++ b/packages/vant/src/share-sheet/index.less
@@ -1,6 +1,7 @@
 @import '../style/mixins/hairline';
 
-:root {
+:root,
+:host {
   --van-share-sheet-header-padding: var(--van-padding-sm) var(--van-padding-md);
   --van-share-sheet-title-color: var(--van-text-color);
   --van-share-sheet-title-font-size: var(--van-font-size-md);
diff --git a/packages/vant/src/sidebar-item/index.less b/packages/vant/src/sidebar-item/index.less
index 6256fae7864..2b750a3e95e 100644
--- a/packages/vant/src/sidebar-item/index.less
+++ b/packages/vant/src/sidebar-item/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-sidebar-font-size: var(--van-font-size-md);
   --van-sidebar-line-height: var(--van-line-height-md);
   --van-sidebar-text-color: var(--van-text-color);
diff --git a/packages/vant/src/sidebar/index.less b/packages/vant/src/sidebar/index.less
index faa02e90057..b265d4509f4 100644
--- a/packages/vant/src/sidebar/index.less
+++ b/packages/vant/src/sidebar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-sidebar-width: 80px;
 }
 
diff --git a/packages/vant/src/signature/index.less b/packages/vant/src/signature/index.less
index 88eed29efc3..5b84452bb17 100644
--- a/packages/vant/src/signature/index.less
+++ b/packages/vant/src/signature/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-signature-padding: var(--van-padding-xs);
   --van-signature-content-height: 200px;
   --van-signature-content-background: var(--van-background-2);
diff --git a/packages/vant/src/skeleton-avatar/index.less b/packages/vant/src/skeleton-avatar/index.less
index 3894179ff9d..53e06f251d8 100644
--- a/packages/vant/src/skeleton-avatar/index.less
+++ b/packages/vant/src/skeleton-avatar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-skeleton-avatar-size: 32px;
   --van-skeleton-avatar-background: var(--van-active-color);
 }
diff --git a/packages/vant/src/skeleton-image/index.less b/packages/vant/src/skeleton-image/index.less
index eaf975a469d..fad85f68029 100644
--- a/packages/vant/src/skeleton-image/index.less
+++ b/packages/vant/src/skeleton-image/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-skeleton-image-size: 96px;
   --van-skeleton-image-radius: 24px;
 }
diff --git a/packages/vant/src/skeleton-paragraph/index.less b/packages/vant/src/skeleton-paragraph/index.less
index b5fd7b5e79a..10475a52c00 100644
--- a/packages/vant/src/skeleton-paragraph/index.less
+++ b/packages/vant/src/skeleton-paragraph/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-skeleton-paragraph-height: 16px;
   --van-skeleton-paragraph-background: var(--van-active-color);
   --van-skeleton-paragraph-margin-top: var(--van-padding-sm);
diff --git a/packages/vant/src/skeleton-title/index.less b/packages/vant/src/skeleton-title/index.less
index ddc8123c7d3..60a79f5d34e 100644
--- a/packages/vant/src/skeleton-title/index.less
+++ b/packages/vant/src/skeleton-title/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-skeleton-title-width: 40%;
 }
 
diff --git a/packages/vant/src/skeleton/index.less b/packages/vant/src/skeleton/index.less
index 3e163e2a76b..e73ed2c86d7 100644
--- a/packages/vant/src/skeleton/index.less
+++ b/packages/vant/src/skeleton/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-skeleton-duration: 1.2s;
 }
 
diff --git a/packages/vant/src/slider/index.less b/packages/vant/src/slider/index.less
index e74b506c9d6..486d7e9d0ce 100644
--- a/packages/vant/src/slider/index.less
+++ b/packages/vant/src/slider/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-slider-active-background: var(--van-primary-color);
   --van-slider-inactive-background: var(--van-gray-3);
   --van-slider-disabled-opacity: var(--van-disabled-opacity);
diff --git a/packages/vant/src/step/index.less b/packages/vant/src/step/index.less
index 680561de8ae..56934ac88eb 100644
--- a/packages/vant/src/step/index.less
+++ b/packages/vant/src/step/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-step-text-color: var(--van-text-color-2);
   --van-step-active-color: var(--van-primary-color);
   --van-step-process-text-color: var(--van-text-color);
diff --git a/packages/vant/src/stepper/index.less b/packages/vant/src/stepper/index.less
index ea44c69f310..e87fc31c143 100644
--- a/packages/vant/src/stepper/index.less
+++ b/packages/vant/src/stepper/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-stepper-background: var(--van-active-color);
   --van-stepper-button-icon-color: var(--van-text-color);
   --van-stepper-button-disabled-color: var(--van-background);
diff --git a/packages/vant/src/steps/index.less b/packages/vant/src/steps/index.less
index 475fa9181f4..5d84827510a 100644
--- a/packages/vant/src/steps/index.less
+++ b/packages/vant/src/steps/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-steps-background: var(--van-background-2);
 }
 
diff --git a/packages/vant/src/sticky/index.less b/packages/vant/src/sticky/index.less
index 4a0e8f727b0..c6ccdff6de9 100644
--- a/packages/vant/src/sticky/index.less
+++ b/packages/vant/src/sticky/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-sticky-z-index: 99;
 }
 
diff --git a/packages/vant/src/style/css-variables.less b/packages/vant/src/style/css-variables.less
index 2177c4a41be..94426129c3e 100644
--- a/packages/vant/src/style/css-variables.less
+++ b/packages/vant/src/style/css-variables.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   // Color Palette
   --van-black: #000;
   --van-white: #fff;
diff --git a/packages/vant/src/submit-bar/index.less b/packages/vant/src/submit-bar/index.less
index ba787d94631..0a9716eba8f 100644
--- a/packages/vant/src/submit-bar/index.less
+++ b/packages/vant/src/submit-bar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-submit-bar-height: 50px;
   --van-submit-bar-z-index: 100;
   --van-submit-bar-background: var(--van-background-2);
diff --git a/packages/vant/src/swipe/index.less b/packages/vant/src/swipe/index.less
index 1be090010cb..c5c525c79c5 100644
--- a/packages/vant/src/swipe/index.less
+++ b/packages/vant/src/swipe/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-swipe-indicator-size: 6px;
   --van-swipe-indicator-margin: var(--van-padding-sm);
   --van-swipe-indicator-active-opacity: 1;
diff --git a/packages/vant/src/switch/index.less b/packages/vant/src/switch/index.less
index 8fe51e470fc..85311f2df90 100644
--- a/packages/vant/src/switch/index.less
+++ b/packages/vant/src/switch/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-switch-size: 26px;
   --van-switch-width: calc(1.8em + 4px);
   --van-switch-height: calc(1em + 4px);
diff --git a/packages/vant/src/tabbar-item/index.less b/packages/vant/src/tabbar-item/index.less
index e66f907e47f..8fb753de645 100644
--- a/packages/vant/src/tabbar-item/index.less
+++ b/packages/vant/src/tabbar-item/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-tabbar-item-font-size: var(--van-font-size-sm);
   --van-tabbar-item-text-color: var(--van-text-color);
   --van-tabbar-item-active-color: var(--van-primary-color);
diff --git a/packages/vant/src/tabbar/index.less b/packages/vant/src/tabbar/index.less
index cbf2f06e59b..5dfb6d60b75 100644
--- a/packages/vant/src/tabbar/index.less
+++ b/packages/vant/src/tabbar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-tabbar-height: 50px;
   --van-tabbar-z-index: 1;
   --van-tabbar-background: var(--van-background-2);
diff --git a/packages/vant/src/tabs/index.less b/packages/vant/src/tabs/index.less
index ae606be1a3c..94ea58263e8 100644
--- a/packages/vant/src/tabs/index.less
+++ b/packages/vant/src/tabs/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-tab-text-color: var(--van-gray-7);
   --van-tab-active-text-color: var(--van-text-color);
   --van-tab-disabled-text-color: var(--van-text-color-3);
diff --git a/packages/vant/src/tag/index.less b/packages/vant/src/tag/index.less
index 034709164a0..8e0a3b65873 100644
--- a/packages/vant/src/tag/index.less
+++ b/packages/vant/src/tag/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-tag-padding: 0 var(--van-padding-base);
   --van-tag-text-color: var(--van-white);
   --van-tag-font-size: var(--van-font-size-sm);
diff --git a/packages/vant/src/text-ellipsis/index.less b/packages/vant/src/text-ellipsis/index.less
index 766f3785a74..a2ec0190129 100644
--- a/packages/vant/src/text-ellipsis/index.less
+++ b/packages/vant/src/text-ellipsis/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-text-ellipsis-line-height: 1.6;
   --van-text-ellipsis-action-color: var(--van-blue);
 }
diff --git a/packages/vant/src/toast/index.less b/packages/vant/src/toast/index.less
index 5dffdd5642c..3d871c0951d 100644
--- a/packages/vant/src/toast/index.less
+++ b/packages/vant/src/toast/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-toast-max-width: 70%;
   --van-toast-font-size: var(--van-font-size-md);
   --van-toast-text-color: var(--van-white);
diff --git a/packages/vant/src/tree-select/index.less b/packages/vant/src/tree-select/index.less
index b3ec6296d4e..bc4f4d25d33 100644
--- a/packages/vant/src/tree-select/index.less
+++ b/packages/vant/src/tree-select/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-tree-select-font-size: var(--van-font-size-md);
   --van-tree-select-nav-background: var(--van-background);
   --van-tree-select-content-background: var(--van-background-2);
diff --git a/packages/vant/src/uploader/index.less b/packages/vant/src/uploader/index.less
index 38afd7a84a3..848b7977341 100644
--- a/packages/vant/src/uploader/index.less
+++ b/packages/vant/src/uploader/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-uploader-size: 80px;
   --van-uploader-icon-size: 24px;
   --van-uploader-icon-color: var(--van-gray-4);
diff --git a/packages/vant/src/watermark/index.less b/packages/vant/src/watermark/index.less
index 299a9562dc4..78d92c14694 100644
--- a/packages/vant/src/watermark/index.less
+++ b/packages/vant/src/watermark/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-watermark-z-index: 100;
 }