From 3523df74dbe99fe7a5236f7e9e9209d5d237b0c2 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 18 Sep 2025 12:43:03 +0800
Subject: [PATCH] feat: add `inheritAttrs` option to components that include
 `ClientOnly` (#697)

---
 .../plugin-md-power/src/client/components/CodeSandbox.vue  | 7 ++++++-
 plugins/plugin-md-power/src/client/components/Replit.vue   | 5 +++++
 .../plugin-md-power/src/client/components/VPVideoEmbed.vue | 5 +++++
 theme/src/client/components/VPEncryptGlobal.vue            | 6 +++++-
 theme/src/client/components/VPEncryptPage.vue              | 6 +++++-
 theme/src/client/components/VPIconify.vue                  | 7 ++++++-
 theme/src/client/features/components/RepoCard.vue          | 6 +++++-
 theme/src/client/features/components/Swiper.vue            | 4 ++++
 8 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/plugins/plugin-md-power/src/client/components/CodeSandbox.vue b/plugins/plugin-md-power/src/client/components/CodeSandbox.vue
index c3d2f625..33591c2e 100644
--- a/plugins/plugin-md-power/src/client/components/CodeSandbox.vue
+++ b/plugins/plugin-md-power/src/client/components/CodeSandbox.vue
@@ -2,6 +2,10 @@
 import type { CodeSandboxTokenMeta } from '../../shared/index.js'
 import { computed } from 'vue'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<CodeSandboxTokenMeta>()
 
 const EMBED_LINK = 'https://codesandbox.io/embed/'
@@ -37,9 +41,10 @@ const source = computed(() => {
     <iframe
       :src="source" class="code-sandbox-iframe" :title="title || 'CodeSandbox'" :allow="ALLOW" :sandbox="SANDBOX"
       :style="{ width, height }"
+      v-bind="$attrs"
     />
   </ClientOnly>
-  <p v-else>
+  <p v-else v-bind="$attrs">
     <a class="code-sandbox-link no-icon" :href="source" target="_blank" rel="noopener noreferrer" :aria-label="title || 'CodeSandbox'">
       <svg xmlns="http://www.w3.org/2000/svg" width="165" height="32" viewBox="0 0 165 32" fill="none">
         <rect width="165" height="32" rx="4" fill="#E3FF73" />
diff --git a/plugins/plugin-md-power/src/client/components/Replit.vue b/plugins/plugin-md-power/src/client/components/Replit.vue
index 63e9d3c5..d7ba5773 100644
--- a/plugins/plugin-md-power/src/client/components/Replit.vue
+++ b/plugins/plugin-md-power/src/client/components/Replit.vue
@@ -4,6 +4,10 @@ import { useDarkMode } from '@vuepress/helper/client'
 import { computed, ref } from 'vue'
 import Loading from './icons/Loading.vue'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<ReplitTokenMeta>()
 
 // magic height
@@ -37,6 +41,7 @@ function onload() {
       :src="link"
       :title="title || 'Replit'"
       :style="{ width, height }"
+      v-bind="$attrs"
       allowtransparency="true"
       allowfullscree="true"
       @load="onload"
diff --git a/plugins/plugin-md-power/src/client/components/VPVideoEmbed.vue b/plugins/plugin-md-power/src/client/components/VPVideoEmbed.vue
index 3f6bb66e..b357114e 100644
--- a/plugins/plugin-md-power/src/client/components/VPVideoEmbed.vue
+++ b/plugins/plugin-md-power/src/client/components/VPVideoEmbed.vue
@@ -2,6 +2,10 @@
 import { toRefs } from 'vue'
 import { useSize } from '../composables/size.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<{
   src: string
   title: string
@@ -26,6 +30,7 @@ const { el, width, height, resize } = useSize(options)
       :src="src"
       :title="title || type"
       :style="{ width, height }"
+      v-bind="$attrs"
       :allow="IFRAME_ALLOW"
       @load="resize"
     />
diff --git a/theme/src/client/components/VPEncryptGlobal.vue b/theme/src/client/components/VPEncryptGlobal.vue
index f5cbb103..7424091f 100644
--- a/theme/src/client/components/VPEncryptGlobal.vue
+++ b/theme/src/client/components/VPEncryptGlobal.vue
@@ -4,6 +4,10 @@ import VPFooter from '@theme/VPFooter.vue'
 import { computed } from 'vue'
 import { useData } from '../composables/index.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { theme, site } = useData()
 
 const profile = computed(() => theme.value.profile)
@@ -12,7 +16,7 @@ const title = computed(() => profile.value?.name || site.value.title)
 
 <template>
   <ClientOnly>
-    <div class="vp-global-encrypt">
+    <div class="vp-global-encrypt" v-bind="$attrs">
       <div class="global-encrypt-container">
         <div v-if="profile || title" class="profile">
           <p v-if="profile" class="avatar" :class="{ circle: profile.circle }">
diff --git a/theme/src/client/components/VPEncryptPage.vue b/theme/src/client/components/VPEncryptPage.vue
index d8be5c5a..8043e248 100644
--- a/theme/src/client/components/VPEncryptPage.vue
+++ b/theme/src/client/components/VPEncryptPage.vue
@@ -2,12 +2,16 @@
 import VPEncryptForm from '@theme/VPEncryptForm.vue'
 import { useData } from '../composables/index.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { theme, frontmatter } = useData<'post'>()
 </script>
 
 <template>
   <ClientOnly>
-    <div class="vp-page-encrypt">
+    <div class="vp-page-encrypt" v-bind="$attrs">
       <div class="logo">
         <span class="vpi-lock icon-lock-head" />
       </div>
diff --git a/theme/src/client/components/VPIconify.vue b/theme/src/client/components/VPIconify.vue
index e28e1d37..a3f1f356 100644
--- a/theme/src/client/components/VPIconify.vue
+++ b/theme/src/client/components/VPIconify.vue
@@ -5,6 +5,10 @@ import { Icon as OfflineIcon } from '@iconify/vue/offline'
 import { computed, ref, watch } from 'vue'
 import { useIconsData } from '../composables/index.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<{
   name: string
   size?: { width?: string, height?: string }
@@ -49,9 +53,10 @@ if (!__VUEPRESS_SSR__)
     :style="{ color, ...size }"
     aria-hidden
     data-provider="iconify"
+    v-bind="$attrs"
   />
   <ClientOnly v-else>
-    <span v-if="!loaded" class="vp-icon iconify" :style="{ color, ...size }" />
+    <span v-if="!loaded" class="vp-icon iconify" :style="{ color, ...size }" v-bind="$attrs" />
     <OfflineIcon
       v-else-if="icon"
       class="vp-icon iconify"
diff --git a/theme/src/client/features/components/RepoCard.vue b/theme/src/client/features/components/RepoCard.vue
index 8e86af6d..8e0f0349 100644
--- a/theme/src/client/features/components/RepoCard.vue
+++ b/theme/src/client/features/components/RepoCard.vue
@@ -3,6 +3,10 @@ import { toRef } from 'vue'
 import { ClientOnly } from 'vuepress/client'
 import { useGithubRepo } from '../composables/repo.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<{
   repo: string
   fullname?: boolean
@@ -13,7 +17,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'), toRef(props, 'provi
 
 <template>
   <ClientOnly>
-    <div v-if="loaded && data?.name" class="vp-repo-card">
+    <div v-if="loaded && data?.name" class="vp-repo-card" v-bind="$attrs">
       <p class="repo-name">
         <span :class="`vpi-${provider}-repo`" />
         <span class="repo-link">
diff --git a/theme/src/client/features/components/Swiper.vue b/theme/src/client/features/components/Swiper.vue
index d08c1103..8bfa54d1 100644
--- a/theme/src/client/features/components/Swiper.vue
+++ b/theme/src/client/features/components/Swiper.vue
@@ -53,6 +53,10 @@ interface Props {
   swipe?: boolean // 是否可以鼠标拖动
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<Props>(), {
   width: '100%',
   height: '100%',