自定义元素继承HTMLProgressElement无响应的原因及实现咨询

你遇到的问题是因为自定义内置元素（Customized Built-in Elements）的使用方式不对。当你继承HTMLProgressElement并在customElements.define里指定{ extends: 'progress' }时，这个自定义元素属于扩展原生内置元素的类型，不能直接用<free-shipping-bar>这种独立标签来创建实例。

浏览器会把<free-shipping-bar>当成一个普通的自定义元素（默认继承HTMLElement），但你的类是继承HTMLProgressElement的，两者不匹配，所以浏览器不会用这个类去实例化该元素，自然constructor里的代码不会执行。而当你改成继承HTMLElement时，类的类型和浏览器对<free-shipping-bar>的预期匹配，所以constructor正常执行。

如果你想真正继承原生progress元素的功能，必须用原生标签+is属性的方式来使用自定义内置元素：

修正后的HTML代码 #

<progress is="free-shipping-bar" value="32" max="100"></progress>

保持原JS代码不变 #

class FreeShippingBar extends HTMLProgressElement {
    constructor() {
        super();
        console.log('test');
    }
}

if (!customElements.get('free-shipping-bar'))
    customElements.define('free-shipping-bar', FreeShippingBar, { extends: 'progress' });

这样修改后，浏览器会正确识别这是一个扩展自progress的自定义元素，constructor里的console.log就会正常执行，同时你也能继承原生progress的所有属性和行为。

如果坚持想用<free-shipping-bar>这种独立标签，那你只能继承HTMLElement，然后自己手动实现进度条的样式和逻辑（比如用CSS模拟进度条效果，自己处理value、max等属性），但这种方式无法继承原生progress的内置功能。

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