扩展<header><main><footer><aside>标签应继承的正确类是什么

扩展<header>、<main>、<footer>、<aside>这类语义化区块元素时，自定义类直接继承HTMLElement即可。

原理说明 #

HTML 规范只为存在特殊属性、专属行为的内置元素定义了独立的 DOM 接口（比如 <a> 对应 HTMLAnchorElement、<video> 对应 HTMLVideoElement）。而 <header>、<main>、<footer>、<aside> 仅存在语义差异，没有额外的专属特性，因此原生就直接复用 HTMLElement 作为接口，不存在单独的 HTMLHeaderElement 这类定义。

正确实现代码 #

JS 注册逻辑

class CustomHeader extends HTMLElement {
  constructor() {
    super()
    // 此处写入 header 自定义逻辑
  }
}
class CustomMain extends HTMLElement {
  constructor() {
    super()
    // 此处写入 main 自定义逻辑
  }
}
class CustomFooter extends HTMLElement {
  constructor() {
    super()
    // 此处写入 footer 自定义逻辑
  }
}
class CustomAside extends HTMLElement {
  constructor() {
    super()
    // 此处写入 aside 自定义逻辑
  }
}

// 注册时通过 extends 参数指定要扩展的内置标签
customElements.define('custom-header', CustomHeader, { extends: 'header' })
customElements.define('custom-main', CustomMain, { extends: 'main' })
customElements.define('custom-footer', CustomFooter, { extends: 'footer' })
customElements.define('custom-aside', CustomAside, { extends: 'aside' })

HTML 使用方式

<header is="custom-header"></header>
<main is="custom-main"></main>
<footer is="custom-footer"></footer>
<aside is="custom-aside"></aside>

兼容注意 #

上述自定义内置元素方案（is 属性写法）不兼容 Safari 浏览器，如果需要全平台兼容，建议改用自治自定义元素方案：直接定义完整的自定义标签，内部封装原生的对应语义标签实现功能。

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