我正在尝试创建自定义元素...
我的第一个选择:
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年7月8日和<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
最佳答案
要使用自定义的内置元素，您必须以不同的方式引用它们(通过使用 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"还没有
关于javascript - 如何使用 Web 组件创建自定义元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56905396/