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

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>

08.07.2019 和 <button is="awesome-button">CLICK ME</button>

Each my attempt turns out a simple element. How to correct create custom element, which extended from native?

js, vue, html5

Answer 1

要使用自定义的 built-in 元素，您必须以不同方式引用它们（通过使用 is 属性）see here

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-07-08）都支持 "Customized built-in elements"

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

How to create custom elements, using web components?

javascript

html

web-component

custom-element