tency小七
tency小七

web component学习笔记

参考链接：https://www.robinwieruch.de/web-components-tutorial

http://www.ruanyifeng.com/blog/2019/08/web_components.html

https://mp.weixin.qq.com/s/KsPpmBrLsu0HjYWuzyAdgQ

https://segmentfault.com/a/1190000019115050

前置知识：

  • appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
    xxx.appendChild(node)
    node指的是你要添加的节点对象。

为什么要使用web components

现在很多人都使用框架进行开发，例如Vue，Angluar，React，组件化开发已经成为大家的日常，但是，有没有想过，如果不需要框架就能实现可复用的前端组件，或者说在不同的框架之间使用同一套组件，那是不是会掀起一阵新的浪潮？

web components就是这样的一套功能组件，只需要HTML,CSS和JavaScript就能创建能运行在任何浏览器上的可复用组件了。

开始动手搭建我们的web components吧

我们的目标是做一个像这个一样的小组件！！！冲鸭！


image.png
定义一个类

构造函数必须是一个ES6的类，

class HelloWorld extends HTMLElement {
  constructor() {
    // 必须首先调用 super 方法
    super();

    // 元素的功能代码写在这里

    ...
  }
}

注册一个 custom emelent

使用customElements.define来注册一个 custom emelent，这个方法接受三个参数：

  1. 所创建的元素名称的符合，不能为单个单词，中间必须要用短横线连接，方便与原生的HTML元素区别开来。
  2. 用于定义元素行为的类
  3. 可选参数，一个包含extends 属性的配置对象，是可选参数。它指定了所创建的元素继承自哪个内置元素，可以继承任何内置元素。

看下实例：

customElements.define('hello-world', HelloWorld, { extends: 'p' });

这个元素叫做 hello-world，它的类对象是 HelloWorld, 继承自自

元素。

template标签

Web Components API 提供了