如何在summary标签不可见时隐藏details的默认显示内容？

当<summary>被v-if隐藏时，浏览器会自动给<details>生成默认的summary内容（显示“Details”和图标），可以通过以下几种方式解决：

方法1：直接控制<details>的渲染 #

如果不需要在isvisible为true时保留<details>元素，直接给<details>加上v-if条件，彻底隐藏整个组件：

<template>
  <details v-if="!isvisible">
    <summary>Hello everyone</summary>
    <!-- 这里放details的展开内容 -->
  </details>
</template>
<script>
export default {
  data() {
    return {
      isvisible: true
    }
  }
}
</script>
<style>
details > summary {
  list-style: none;
  -webkit-appearance: none;
}

details > summary::-webkit-details-marker {
  display: none;
}
</style>

方法2：用空summary占位并隐藏 #

如果需要保留<details>元素（比如里面有内容需要保留但不显示summary），可以添加一个空的<summary>作为v-else分支，再通过CSS隐藏它的占位空间：

<template>
  <details>
    <summary v-if="!isvisible">Hello everyone</summary>
    <summary v-else class="empty-summary"></summary>
    <!-- 这里放details的展开内容 -->
  </details>
</template>
<script>
export default {
  data() {
    return {
      isvisible: true
    }
  }
}
</script>
<style>
details > summary {
  list-style: none;
  -webkit-appearance: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.empty-summary {
  height: 0;
  overflow: hidden;
  padding: 0;
  border: none;
}
</style>

方法3：用CSS :has选择器控制样式（需注意浏览器兼容性） #

利用CSS的:has选择器，识别出内部summary被隐藏的details，再隐藏默认的summary区域：

<template>
  <details>
    <summary v-if="!isvisible">Hello everyone</summary>
    <!-- 这里放details的展开内容 -->
  </details>
</template>
<script>
export default {
  data() {
    return {
      isvisible: true
    }
  }
}
</script>
<style>
details > summary {
  list-style: none;
  -webkit-appearance: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* 当details内的summary被隐藏时，隐藏默认的summary区域 */
details:has(summary[style*="display: none"]) {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
</style>

补充说明 #

浏览器的默认行为是：当<details>标签内没有显式的<summary>元素，或者<summary>被设置为display: none时，会自动生成一个默认的summary节点，这就是你看到“Details”文字和图标的原因。上面的方法分别从条件渲染和样式控制两个角度解决了这个问题。

内容的提问来源于stack exchange，提问作者user18286913