详解vue3.2新增的defineCustomElement底层原理
目录
- Web Components
- customElements
- 概述
- HTMLTemplateElement 内容模板元素
- 概述
- 常用属性
- ShadowRoot
- 概述
Web Components
Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。
相当于是浏览器原生的定义组件的方式，不用通过vue或者react这些框架实现组件的定义
customElements
概述
customElements 是Window对象上的一个只读属性，接口返回一个CustomElementRegistry 对象的引用，可用于注册新的 custom elements，或者获取之前定义过的自定义元素的信息。
HTMLTemplateElement 内容模板元素
概述
HTML内容模板（）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。
常用属性
content 获取DocumentFragment 元素片段的内容
相当于通过document.createDocumentFragment()创建的元素片段，
test-template
ShadowRoot
概述
Shadow DOM API 的 ShadowRoot 接口是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染。
你可以通过使用一个元素的 Element.shadowRoot 属性来检索它的参考,假设它是由 Element.attachShadow() 创建的并使 mode 设置为 open.
通过 Element.attachShadow()挂载影子DOM
完整的演示代码
Document - 锐客网 .main{color: #f00; }我是template片段 .slot{color: rgb(87, 28, 223); }我是slot AAA
到此这篇关于详解vue3.2新增的defineCustomElement底层原理的文章就介绍到这了,更多相关vue3.2 defineCustomElement内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
推荐阅读
- Java|Java OpenCV图像处理之SIFT角点检测详解
- C语言浮点函数中的modf和fmod详解
- 虚拟DOM-Diff算法详解
- LSTM网络层详解及其应用实例
- Excel|Excel 2013 新增功能之瞬间填充整列数据！
- OC:|OC: WKWebView详解
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- Vue组件之事件总线和消息发布订阅详解
- JS截取字符串的方法详解
- C语言进阶栈帧示例详解教程