如何通过类、自定义标签等方式扩展HTML<details>标签实现自定义脚注样式

实现方案 #

这里提供两种可在单个HTML文件内完成的实现方式，你可以按需选择：

方式1：CSS类实现（最简便，无需编写JS）

你其实不需要特意自定义标签，用CSS类选择器就能实现「仅脚注场景的details套用指定样式、不影响其他场景details」的需求：

1. 把你写的样式里的选择器改成带类名的形式：

<style>
/* 仅作用于带details-foot类的details元素 */
details.details-foot {
    margin-bottom: 5px
}

details.details-foot > summary {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 20px;
  font-size: 6pt
}

details.details-foot > p {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-left: 20px;
  margin-bottom: 0px;
  font-size: 6pt
}
</style>

2. 之后用作脚注的details标签加上class="details-foot"即可，其他场景的details不用加类，完全不受影响：

<!-- 脚注场景 -->
<details class="details-foot">
  <summary>脚注1</summary>
  <p>这里是脚注具体内容</p>
</details>

<!-- 其他场景，用默认样式 -->
<details>
  <summary>普通折叠内容</summary>
  <p>不会套用脚注样式</p>
</details>

方式2：自定义元素实现（如果需要独立标签写法）

如果你确实需要用<details-foot>这种自定义标签的形式，你之前缺的知识点是：自定义元素的定义不是写在标签内容里，而是需要用JS的customElementsAPI注册，完整实现代码如下：

<script>
// 定义自定义元素类，继承原生details的所有功能
class DetailsFoot extends HTMLDetailsElement {
  constructor() {
    super();
    // 自动给元素加上脚注样式类
    this.classList.add('details-foot');
  }
}
// 注册自定义元素，指定扩展原生details标签
customElements.define('details-foot', DetailsFoot, { extends: 'details' });
</script>

<style>
details.details-foot {
    margin-bottom: 5px
}

details.details-foot > summary {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 20px;
  font-size: 6pt
}

details.details-foot > p {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-left: 20px;
  margin-bottom: 0px;
  font-size: 6pt
}
</style>

<!-- 使用方式 -->
<details is="details-foot">
  <summary>脚注1</summary>
  <p>脚注内容</p>
</details>

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