HTML自定义元素在Safari创建失败，自定义方法无法调用如何解决？

1. 确保自定义元素的注册符合规范 #

内置自定义元素（基于HTMLButtonElement扩展）必须在注册时指定extends选项，这是Safari识别这类元素的核心要求：

class MyOwnElementButton extends HTMLButtonElement {
  constructor() {
    super();
    console.log('构造函数触发');
  }

  myMethod() {
    console.log('自定义方法执行');
  }
}

// 注册时必须添加extends参数，指定继承的内置元素类型
customElements.define('myown-element-button', MyOwnElementButton, { extends: 'button' });

2. 兼容Safari的元素创建方式 #

Safari不支持document.createElement("button", { is: "myown-element-button" })语法，需要改用手动设置is属性+手动升级的方式：

// 确保元素已完成注册
const myButton = document.createElement('button');
myButton.setAttribute('is', 'myown-element-button');

// 手动触发元素升级（Safari不会自动完成这一步）
customElements.upgrade(myButton);

// 此时可正常调用自定义方法
myButton.myMethod();

3. 处理HTML中已存在的元素 #

如果是直接从HTML中获取预定义的<button is="myown-element-button">元素，Safari同样不会自动升级，需手动调用customElements.upgrade：

const existingBtn = document.querySelector('button[is="myown-element-button"]');
// 手动升级元素
customElements.upgrade(existingBtn);
// 现在可以正常调用myMethod
existingBtn.myMethod();

4. 版本兼容与Polyfill #

• 确认Safari版本在14.1及以上，该版本才开始支持内置自定义元素；
• 若需兼容更低版本的Safari，引入@webcomponents/custom-elements polyfill，它会补全自定义元素的相关API，包括内置元素的扩展支持。

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