html 自定义标签 组件化,Web Components之自定义HTML标签

一、Web Components

Web Components是一种组件化的方式，它允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。Web Components的一个重要特性是封装，通过Web Components创建的组件，可以有效地将其自身的html结构、css样式及行为隐藏起来，并从页面中的其他代码分离出来，也就是每个组件都是独立的，不会互相干扰。下面是一个Web Components的简单应用：

custom-button>

从上面可以看出我们通过自定义了一个custom-button标签，让按钮拥有了一些自定义的样式，可以看出这种方式其实就是组件化的思想。那么这样一个自定义标签如何实现的呢？

二、自定义标签

W3C制定了两种custom elements: Autonomous custom elements、Customized built-in elements

2.1 Autonomous custom elements

独立的元素，这种元素不会继承现有内建的HTML标签。你可以通过或document.createElement('custom-button')来进行使用。

下面我们来实现上面的小例子，实现这样一个例子很简单，W3C提供了一个HTMLElement类，我们通过继承该类即可实现我们自定义的标签：

class CustomButton exte