Question

我一直在学习Web组件，我有以下代码：

<input is="totally-not-checkbox"> 
<script>
    var protoInput = Object.create(HTMLInputElement.prototype);

    protoInput.createdCallback = function() {
        this.style.color = "orange";
    };

    var nCB = document.registerElement("totally-not-checkbox", {
        prototype: protoInput,
        extends: 'input'
    });
</script>

这是“扩展自定义元素”的简单实现，现在我尝试做同样的事情但不使用INPUT我使用按钮：

<button is='MY-button'>hola</button>

<script>
    var Proto = Object.create(HTMLButtonElement.prototype);

    Proto.createdCallBack = function() {

        this.style.color = "orange";
    }

    var tmp = document.registerElement('MY-button', {
        prototype: Proto,
        extends: 'button'
    });

</script>

但是使用BUTTON，扩展功能没有正确完成;因此，按钮不会采用指示的属性。

我做错了什么？

Answer 1

您应该检查回调的语法：

Proto.createdCallback

而不是：

Proto.createdCallBack

我无法使用BUTTON标记实现“扩展自定义元素”

1 个答案: