用Custom Element来实现UI组件

用Custom Element来实现UI组件

最近在做的项目是要用web component的技术来搭建一个UI库。由于之前从来没接触过前端的知识，也是趁这次机会简单的学习了解了Javascript， HTML， CSS。

Web compoenents 是在当前的web 标准下，允许你创建可重用的定制元素并且在web应用中使用它。和React， Angular框架下的前端组件不同的是，用web component来创建的定制元素是可以在不同的框架中使用，也可以在html里直接使用，因为他和我们使用的div没什么区别，能使用div的地方就能使用它。

Web component是一个web组件标准，由四项技术组成，分别是Custom elements(自定义元素)， Shadow DOM(影子DOM), HTML templates(HTML模版), 和HTML Imports(HTML导入)。 在这里我主要是用了Custom elements来创建和封装元素。

创建Custom Elements

Web compoenens提供了一系列的生命周期回调方法， 包括connectedCallback， disconnectedCallback， adoptedCallback，attributeChangedCallback。 以下代码就是一个简单的自定义元素

class MyElements extends HTMLElements {
   
  // called when element created
  constructor() {
   
    super();
    //方法在整个生命周期中只会被触发一次。可以在这里初始化一些变量
  }
  // return an array of the attribute names you want to watch for changes
  observedAttributes() {