如何使用 Web 组件创建自定义元素？
Ily*_*nko 0 html javascript web-component custom-element
我正在尝试创建自定义元素...
我的第一个选择：
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>
我的每一次尝试都变成了一个简单的元素。如何正确创建从本机扩展的自定义元素？
js、vue、html5
要使用自定义的内置元素，您必须以不同的方式引用它们（通过使用 -is属性），请参见此处
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日）的支持“定制内置元件”还
| 归档时间： |
|
| 查看次数： |
264 次 |
| 最近记录： |