如何实现自定义内置元素is属性的动态切换？

示例自定义元素定义 #

customElements.define("span-red", class extends HTMLSpanElement {
    constructor() {
        super();
        this.style.color = "red";
    }
}, { extends: "span" }
);

customElements.define("span-blue", class extends HTMLSpanElement {
    constructor() {
        super();
        this.style.color = "blue";
    }
}, { extends: "span" }
);

对应HTML代码 #

<span is="span-red">Red</span>
<span is="span-blue">Blue</span>

需求 #

我希望修改第一个<span>的is属性为span-blue，让原本显示红色的“Red”文本变为蓝色。

原生方案限制 #

根据HTML标准明确规定：

自定义元素创建后，修改is属性的值不会改变元素的行为，因为该值已被保存为元素的is属性值。

目前没有纯原生解决方案：

• 可以通过设置observedAttributes属性，并将功能移至attributeChangedCallback方法，但这并不会改变元素的类；
• 另一种方法是获取元素的outerHTML，修改字符串中的is属性后重新创建元素，但这样会丢失元素的所有引用和事件监听器，除非手动跟踪，这种方式非常繁琐且非原生。

设想的实现思路 #

我期望能实现类似如下的逻辑：

customElements.define("span-red", class extends HTMLSpanElement {
    constructor() {
        super();
        this.decorate();
    }
    destruct() { ... }
    decorate() { ... }
    ...
}, { extends: "span" }
);

其中decorate()方法将元素重置为原始HTMLSpanElement状态，然后修改原型并调用新原型（如span-blue）的decorate()方法。

核心问题 #

如果这种思路不可行，那更普遍的问题是：能否让is属性实现动态切换？

内容的提问来源于stack exchange，提问作者Jan Turoň