From b208a7e90ca8109bb1685588281402264e75264d Mon Sep 17 00:00:00 2001
From: jiaxiang <zjx9987@gmail.com>
Date: Mon, 10 Nov 2025 11:39:07 +0800
Subject: [PATCH] docs(style):  fix class name repeat (#22739)

* docs: [Watermark] rename class name

* Update docs/examples/watermark/custom.vue

Co-authored-by: btea <2356281422@qq.com>

* chore: fix

* style: update

* Update docs/examples/autocomplete/custom-header-footer.vue

Co-authored-by: rzzf <cszhjh@gmail.com>

* fix(docs): update

* Update docs/examples/cascader/custom-header-footer.vue

* Update docs/examples/cascader/custom-header-footer.vue

---------

Co-authored-by: btea <2356281422@qq.com>
Co-authored-by: rzzf <cszhjh@gmail.com>
---
 .../autocomplete/custom-header-footer.vue     | 12 +++++------
 .../cascader/custom-header-footer.vue         | 20 +++++++++----------
 docs/examples/watermark/custom.vue            |  4 ++--
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/docs/examples/autocomplete/custom-header-footer.vue b/docs/examples/autocomplete/custom-header-footer.vue
index bf34d25ab0..63db89a60a 100644
--- a/docs/examples/autocomplete/custom-header-footer.vue
+++ b/docs/examples/autocomplete/custom-header-footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo">
+  <div class="autocomplete-custom-header-footer">
     <div>
       <p>Custom header content</p>
       <el-autocomplete
@@ -87,20 +87,20 @@ const handleClear = () => {
 }
 </script>
 
-<style>
-.demo {
+<style scoped>
+.autocomplete-custom-header-footer {
   display: flex;
 }
 
-.demo > div {
+.autocomplete-custom-header-footer > div {
   flex: 1;
   text-align: center;
 }
-.demo > div > .el-autocomplete {
+.autocomplete-custom-header-footer > div > :deep(.el-autocomplete) {
   width: 50%;
 }
 
-.demo > div:not(:last-child) {
+.autocomplete-custom-header-footer > div:not(:last-child) {
   border-right: 1px solid var(--el-border-color);
 }
 </style>
diff --git a/docs/examples/cascader/custom-header-footer.vue b/docs/examples/cascader/custom-header-footer.vue
index 425f086fe8..89a2c5fe74 100644
--- a/docs/examples/cascader/custom-header-footer.vue
+++ b/docs/examples/cascader/custom-header-footer.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="demo">
+  <div class="cascader-custom-header-footer">
     <div>
       <p>Custom header content</p>
       <el-cascader
         v-model="value"
-        popper-class="custom-header"
+        popper-class="cascader-custom-header"
         :options="options"
         :props="props"
         clearable
@@ -100,24 +100,22 @@ const handleClear = () => {
 }
 </script>
 
-<style>
-.demo {
+<style scoped>
+.cascader-custom-header-footer {
   display: flex;
 }
 
-.demo > div {
+.cascader-custom-header-footer > div {
   flex: 1;
   text-align: center;
 }
 
-.demo > div:not(:last-child) {
+.cascader-custom-header-footer > div:not(:last-child) {
   border-right: 1px solid var(--el-border-color);
 }
 
-.custom-header {
-  .el-checkbox {
-    display: flex;
-    height: unset;
-  }
+.cascader-custom-header .el-checkbox {
+  display: flex;
+  height: unset;
 }
 </style>
diff --git a/docs/examples/watermark/custom.vue b/docs/examples/watermark/custom.vue
index 322ee65c13..0a0051c6b5 100644
--- a/docs/examples/watermark/custom.vue
+++ b/docs/examples/watermark/custom.vue
@@ -25,7 +25,7 @@ const config = reactive({
       :gap="config.gap"
       :offset="config.offset"
     >
-      <div class="demo">
+      <div class="watermark-container">
         <h1>Element Plus</h1>
         <h2>A Vue 3 based component library for designers and developers</h2>
         <img src="/images/hamburger.png" alt="示例图片" />
@@ -84,7 +84,7 @@ const config = reactive({
   display: flex;
   flex: auto;
 }
-.demo {
+.watermark-container {
   flex: auto;
 }
 .form {