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 {