使用HyperHTMLElement定义自定义元素，Chrome/Safari继承报错求助

我帮你排查了下这个问题，Chrome和Safari里继承HyperHTMLElement报错，大概率是模块导入路径、polyfill加载时机或者转译配置没做好导致的，给你几个针对性的解决方案：

1. 修正模块导入路径与加载顺序 #

首先检查hyperhtml-element的导入路径——很多时候不需要加/esm后缀，直接导入包本身即可，同时要确保document-register-element这个polyfill在HyperHTMLElement之前加载（因为它依赖自定义元素API）：

修改后的src/index.js：

// 先加载自定义元素polyfill，确保API可用
import 'document-register-element';
// 直接导入hyperhtml-element，无需额外后缀
import HyperHTMLElement from 'hyperhtml-element';

const { bind } = HyperHTMLElement;

class Hello extends HyperHTMLElement {
  // 建议用connectedCallback替代created，确保元素挂载后再操作DOM
  connectedCallback() {
    super.connectedCallback(); // 必须调用父类的钩子方法
    this.textContent = 'hello';
  }
}

// 注册自定义元素
Hello.define('hello-element');

// 渲染到页面
bind(document.body)`<hello-element />`;

2. 配置Rollup完成ES类转译 #

Safari和部分旧版Chrome对ES6类继承原生HTMLElement的语法支持有缺陷，需要用Babel转译。先安装必要依赖：

npm install @babel/core @babel/preset-env rollup-plugin-babel @rollup/plugin-node-resolve @rollup/plugin-commonjs core-js@3 --save-dev

然后完善你的rollup.config.js：

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // 适合浏览器环境的自执行格式
    sourcemap: true
  },
  plugins: [
    resolve(), // 解析node_modules中的第三方模块
    commonjs(), // 将CommonJS模块转换为ES模块
    babel({
      presets: [
        ['@babel/preset-env', {
          targets: {
            chrome: '60',
            safari: '12'
          },
          useBuiltIns: 'usage', // 自动按需引入polyfill
          corejs: 3 // 指定corejs版本
        }]
      ],
      exclude: 'node_modules/**' // 跳过node_modules下的文件转译
    })
  ]
};

3. 检查并更新HyperHTMLElement版本 #

旧版本的hyperhtml-element可能存在浏览器兼容性问题，确保安装最新版：

npm install hyperhtml-element@latest --save

额外注意：避免polyfill冲突 #

如果你的目标浏览器已经原生支持自定义元素（比如新版Chrome），document-register-element可能会引发冲突，可以改成条件加载：

if (!window.customElements) {
  import('document-register-element');
}

不过这种动态导入需要Rollup支持，记得安装@rollup/plugin-dynamic-import-vars并添加到plugins中。

按照这些步骤调整后，Chrome和Safari里的继承报错应该就能解决了。

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