这篇文章主要为大家介绍了2023年了该了解下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 itemMy Item
影子DOM,其内部元素不可以直接被访问到
有一个重要的参数 mode
- open: shadow root 元素通过 js 从外部访问根节点
- closed:拒绝 js 从外部访问关闭的 shadow root 节点
引入外部样式:
My Item
动态创建 webComponent 组件例子
- 通过创建 商品 组件,并使得点击能跳转
以上就是2023年了该了解下WebComponent使用教程的详细内容,更多关于WebComponent使用教程的资料请关注0133技术站其它相关文章!
以上就是2023年了该了解下WebComponent使用教程的详细内容,更多请关注0133技术站其它相关文章!