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

Editor · 发表于 2023-5-4 11:47:33

动态创建 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 方法更新属性
不同操作触发的生命周期函数：

20230224083030029.png

例子：




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



2、HTML templates（HTML 模板）

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




template 方式




error-jd.gif





slot



   .title {
      color: green;
   }

标题
默认内容


不是默认内容



3、Shadow DOM（影子 DOM）

20230224083030030.png

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



  My item

.container.container {
   color: green;
}



   .container {
      color: pink;
   }

My Item



影子DOM，其内部元素不可以直接被访问到
有一个重要的参数 mode

open： shadow root 元素通过 js 从外部访问根节点

closed：拒绝 js 从外部访问关闭的 shadow root 节点







引入外部样式：



My Item




动态创建 webComponent 组件例子

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




   .product-item {
      margin-left: 15px;
      cursor: pointer;
   }
   .img {
      width: 100px;
   }
   .name {
      text-align: center;
   }
   .price {
      color: #999;
      text-align: center;
   }










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

向往草原403 · 发表于 2023-6-28 20:50:30

楼主太厉害了！楼主，I*老*虎*U！我觉得知鸟论坛真是个好地方！

462710480 · 发表于 2023-6-28 22:15:48

这东西我收了！谢谢楼主！知鸟论坛真好！

123456809 · 发表于 2023-6-29 19:58:04

其实我一直觉得楼主的品味不错！呵呵！知鸟论坛太棒了！

哈哈SE7 · 发表于 2023-6-29 21:40:55

楼主，我太崇拜你了！我想我是一天也不能离开知鸟论坛。

普通人物怨 · 发表于 2023-6-30 01:23:41

论坛不能没有像楼主这样的人才啊！我会一直支持知鸟论坛。

老橡树1 · 发表于 2023-6-30 02:02:52

这个帖子不回对不起自己！我想我是一天也不能离开知鸟论坛。

十二音阶囤 · 发表于 2023-6-30 06:01:41

其实我一直觉得楼主的品味不错！呵呵！知鸟论坛太棒了！

惜颜705 · 发表于 2023-6-30 09:44:37

论坛不能没有像楼主这样的人才啊！我会一直支持知鸟论坛。

计划你大爷计j · 发表于 2023-6-30 15:10:56

这个帖子不回对不起自己！我想我是一天也不能离开知鸟论坛。

[JavaScript] 2023年了该了解下WebComponent使用教程