Web components API

@TOCWEB components API简单示例

Web components API简单示例

组件是前端的发展方向，目前vue/react都很火，而且新的版本也是使用的components API，所以在此写一篇简单的入门示例。
Web Components API 内容很多，本文不是全面的教程，只是一个简单演示，让大家看一下怎么用它开发组件。

自定义元素

下面来展示如何写一个简单的自定义按钮组件。我把组件名字定义为 my-button（这里根据自己喜好按规范定义）。

<my-button label="click me"></my-button>

这种自定义的HTML标签被成为自定义元素(custom element)。根据规范，自定义的元素名称必须包含连词线，以此来区别于原生的HTML元素，因此要写成my-button而不是mybutton。

window.customElements.define()

自定义元素需要Javascript定义一个类(class)，所有的my-button都是这个类的实例。

class Button extends HTMLElement {
   
	constructor(){
   
		super()
	}
	...
}

上面代码中Button就是自定义元素的类。要注意⚠️，这个类的父类是HTMLElement，因此继承了HTMLElement的特性。
要想在页面中只用自定义的类，必须要把自定义的元素和这个类进行关联，在此示例中关联代码如下：

window.customElements.define('my-button', Button)

全部代码

<