2023年了该了解下WebComponent使用教程

目录

• 正文
• 三项主要技术
• 1、Custom elements （自定义元素）
• 生命周期函数
• 2、HTML templates（HTML 模板）
• 3、Shadow DOM（影子 DOM）
• 动态创建 webComponent 组件例子

正文

WebComponent 是官方定义的自定义组件实现方式，它可以让开发者不依赖任何第三方框架（如Vue，React）来实现自定义页面组件；达到组件复用效果

一个简单例子，让页面显示 hello world：

三项主要技术

1、Custom elements （自定义元素）

• 一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们

分为两种形式：

自主定制元素：是独立的元素，它不继承其他内建的 HTML 元素，可以直接把它们写成 HTML 标签的形式，来在页面上使用，例如我们刚才自定义的

自定义内置元素：继承自内置的 HTML 元素。指定所需扩展的元素

• 使用时需通过 is 属性指定 custom element 的名称，必须包含一个短横线
• 注册的时候必须使用 extends 的属性

  
  
云牧
  

推荐在 connectedCallback 生命周期函数，处理节点操作

生命周期函数

connectedCallback：插入文档时，可能被多次触发，比如删除后又添加到文档

disconnectedCallback：从文档删除时，可配置做清理工作

adoptedCallback：被移动新文档时

attributeChangedCallback：属性变化时

• 配合 observedAttributess 属性一起使用，指定监听的属性
• 使用 setAttribute 方法更新属性

不同操作触发的生命周期函数：

例子：

  

    

  
  更新属性
  删除节点
  恢复节点
  移动节点
  
  

2、HTML templates（HTML 模板）

• 使用 JS 模板字串符的方式创建模板，提示不友好，复用性差

template 方式

slot

  
  
    
不是默认内容
  
  

3、Shadow DOM（影子 DOM）

影子DOM，其内部样式不共享

  
  
  
My item
  
  
  

影子DOM，其内部元素不可以直接被访问到

有一个重要的参数 mode

• open： shadow root 元素通过 js 从外部访问根节点
• closed：拒绝 js 从外部访问关闭的 shadow root 节点

引入外部样式：

动态创建 webComponent 组件例子

• 通过创建 商品 组件，并使得点击能跳转

以上就是2023年了该了解下WebComponent使用教程的详细内容，更多关于WebComponent使用教程的资料请关注脚本之家其它相关文章！