如何在ES6中创建基于对象的HTML自定义元素组件？

嘿，你的思路已经找对方向啦！你写的类继承自HTMLDivElement属于自定义内置元素，要让它正常工作，只需要多做一步——注册这个元素。下面一步步给你拆解：

1. 定义自定义元素类 #

你写的这个类本身是没问题的，它继承了原生的HTMLDivElement，在构造函数里调用super()初始化父类，然后设置内容：

export default class Container extends HTMLDivElement {
  constructor() {
    super();
    this.innerHTML = 'Content';
    // 你还可以在这里添加更多自定义逻辑，比如绑定事件、设置样式
    this.style.padding = '1rem';
    this.style.border = '1px solid #eee';
  }
}

2. 注册自定义元素 #

要让浏览器识别这个自定义类，必须用customElements.define()方法注册它。因为我们是继承自div，所以要在第三个参数里指定extends选项：

import Container from './Container.js';
// 注册元素，第一个参数是自定义元素的名称（必须包含短横线），第三个参数指定继承的原生元素
customElements.define('custom-container', Container, { extends: 'div' });

注意：自定义元素的名称必须包含短横线，这是HTML规范的要求，用来区分原生元素和自定义元素。

3. 实例化使用 #

现在你就可以用两种方式来使用这个元素了：

方式一：JS中实例化（就是你想要的用法） #

const container = new Container();
document.querySelector('body').appendChild(container);

方式二：直接在HTML中使用 #

因为我们是扩展了div，所以可以用is属性来指定使用自定义类：

<div is="custom-container"></div>

小提示 #

• 这种自定义内置元素的方式，好处是可以直接复用原生元素的所有特性（比如div的默认样式、布局行为），同时添加自己的逻辑。
• 兼容性：现代浏览器（Chrome、Firefox、Safari 10.1+、Edge）都支持自定义元素，IE完全不支持，如果需要兼容旧浏览器可以用polyfill。

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