Question

我正在尝试创建自定义元素...

我的第一个选择：

JS：

class AwesomeButtonComponent extends HTMLButtonElement {
    constructor() {
        super();

        this.addEventListener('click', () => {
            alert('Great job!');
        });
    }
}

customElements.define('awesome-button', AwesomeButtonComponent, {extends: 'button'});

HTML： <awesome-button>CLICK ME</awesome-button>

我的第二个选择：

JS：

customElements.define('awesome-button', Object.create(HTMLButtonElement.prototype), {
       extends: 'button'
    });

HTML： <awesome-button>CLICK ME</awesome-button>

2019/08/07 和<button is="awesome-button">CLICK ME</button>

我的每一次尝试都证明了一个简单的因素。如何正确创建从本机扩展的自定义元素？

js，vue，html5

Answer 1

要使用自定义的内置元素，您必须以不同的方式引用它们（通过使用is属性）https://myAPIendpointservice.com/service.asmx

class AwesomeButtonComponent extends HTMLButtonElement {
    constructor() {
        super();

        this.addEventListener('click', () => {
            alert('Great job!');
        });
    }
}

customElements.define('awesome-button', AwesomeButtonComponent, {extends: 'button'});

<!doctype html>
<html>
  <head>
    <title>Custom element</title>
  </head>
  <body>
    <button is="awesome-button">CLICK ME</button>
  </body>
</html>

请注意，并非所有浏览器（截至2019年7月8日）都支持see here

如何使用Web组件创建自定义元素？

1 个答案: