# Web Components总结

# 说明

# Web Components 包括以下四种技术(每种都可以被单独使用)

  • Shadow DOM
    一种可以在document下组合多个同级别并且可以项目作用的DOM树的方法,因此可以更好完善DOM的构成
  • Custom Elements
    一种可以允许开发者在document中定义并使用的新的dom元素类型,即自定义元素,document.registerElement(),你的自定义元素的名字当中必须至少有一个-
  • HTML Templates

模板没什么可说了,在标准实现之前其实我们一直都在用js来实现该方式

  • HTML Imports
    一种允许一个html文档在别的htmldocuments中包含和复用的方法,可以通过标签,把一小块的HTML代码加载到页面

# 实现web component的基本方法通常如下所示:

  1. 使用ECMAScript 2015类语法创建一个类,来指定web组件的功能。
  2. 使用CustomElementRegistry.define()方法注册您的新自定义元素 ,并向其传递要定义的元素名称、指定元素功能的类以及可选的,其所继承自的元素。
  3. 如果需要的话,使用Element.attachShadow()方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等。
  4. 如果需要的话,使用<template> 和 <slot>方法定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。
  5. 在页面任何您喜欢的位置使用自定义元素,就像使用常规HTML元素那样。

# 生命周期回调方法

  • 元素创建后调用 .createdCallback();
  • 元素附加到文档后调用 .attachedCallback();
  • 从文档中移除元素后调用 .detachedCallback();
  • 元素任一属性变更后调用 .attributeChangedCallback()。

# 支持

image.png
image.png
image.png
image.png

# 参考

  1. Web Components-MDN (opens new window)
  2. w3cplus (opens new window)