如何创建与内置<div>行为完全一致仅名称不同的自定义HTML元素

你可以通过两种方式实现需求，可根据使用习惯选择： #

方案1：自定义内置元素（100%对齐div原生行为，推荐） #

直接扩展原生HTMLDivElement接口，自定义元素会完全继承div的所有默认特性：包括默认块级样式、DOM接口、无障碍属性、事件处理逻辑等，不需要额外适配。
实现代码：

// 定义自定义元素类，继承div原生类
class CustomDivElement extends HTMLDivElement {
  constructor() {
    super();
    // 不需要额外自定义逻辑的话，此处可以留空
  }
}
// 注册自定义元素，必须指定extends配置项
customElements.define('currency-list', CustomDivElement, { extends: 'div' });

使用方式：

<div is="currency-list">
  <!-- 内部内容和普通div完全一致
</div>

方案2：自主自定义元素（支持独立标签写法） #

如果希望直接使用<currency-list>作为独立标签，不需要附加is属性，可以选择该方案，仅需要手动对齐div的默认样式即可：

1. 注册自定义元素：

class CurrencyListElement extends HTMLElement {
  constructor() {
    super();
    // 无自定义逻辑可留空
  }
}
customElements.define('currency-list', CurrencyListElement);

2. 补充全局CSS对齐div默认表现：

currency-list {
  display: block;
  /* 其余默认规则和div一致，margin、padding等默认继承父级，和div无差异 */
}

使用方式：

<currency-list>
  <!-- 内部用法和普通div完全一致 -->
</currency-list>

两种方案都支持所有div原生特性：class、id、style、事件绑定、DOM查询等操作和div完全相同，没有额外性能差异，都可以有效避免div soup问题，实现语义化自定义标签。

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