![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web Components
文章平均质量分 91
Web Components
阿宇的编程之旅
本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、python、Objective-C、ActionScript、Pascal、spss、sas等单词的拼写,熟悉Windows、Linux、Mac、Android、IOS、WP等系统的开关机
展开
-
Web Components详解-HTML Templates
在前面Web Components系列文章的插槽中,我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素,这么做会使标签在DOM多渲染一次,不仅降低了性能,还使标签直接暴露在页面中,遵循组件的可重用性、隔离性和封装性,Web Components提供了一种模板标签:template。它可以在DOM文档中定义模板,然后可以通过JavaScript动态地填充和显示这些模板,达到html组件封装的效果。原创 2024-02-18 10:51:59 · 935 阅读 · 2 评论 -
Web Components详解-Shadow DOM插槽
前言插槽实际上也属于组件通信的一种方式,但是由于其强大的api和实用性,我将其单独拆开来介绍。定义Slot(插槽)是Web Components中一个重要的特性,它允许在组件内部定义占位符,以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中,最终达到在父组件外部实现子组件的效果原创 2023-09-11 10:16:22 · 1168 阅读 · 28 评论 -
Web Components详解-组件通信
我们常说到程序的运行和代码的实现遵循高内聚和低耦合,理解一下这句话,模块中的功能在逻辑上是有关联的,模块之间依赖关系较弱。前端的组件同样遵循这套原则,单个组件的功能逻辑是完整的,组件与组件之间也没有强关联,那么如何保证组件之间的联系呢?在Vue和React中一般使用props响应式通信、bus事件总线、Pinia,Vuex,Mobx全局状态等等方式进行数据传递,类似的本篇文章也将介绍Web组件的通信方式原创 2023-10-24 10:45:53 · 1098 阅读 · 45 评论 -
Web Components详解-Shadow DOM样式控制
前言本文继续Web Components系列文章,介绍一下Shadow DOM的样式及选择器。Shadow DOM的样式与外界是隔离的,即自定义元素的样式只会影响到Shadow DOM内部,不会影响到外部的页面元素,这点在之前有说到过。那么有什么办法可以在Shadow DOM中使用全局样式?样式选择器又有什么异同呢?请跟着本篇文章一起探究:host伪类作为伪类使用原创 2023-10-07 11:22:51 · 832 阅读 · 31 评论 -
Web Components详解-Shadow DOM基础
上篇文章的自定义标签中,我们使用customElements对象对原生标签进行拓展,达到组件的拓展性与复用性的效果,那么如何保证组件的属性、结构及样式的封装隔离便是本篇文章将要分享的内容,本篇文章不仅仅会介绍Shadow DOM,还会对前面说到的Custom Elements做一个使用场景的拓展及深入探究在JS作用域一文中,我们提到全局作用域和局部作用域的概念,如果全局作用域没有处理好可能会导致作用域污染,出现问题。如果单纯的使用Custom Elements实现自定义组件的功能可能会存在样式冲突,Dom干原创 2023-09-04 10:20:18 · 1955 阅读 · 30 评论 -
Web Components详解-Custom Elements
随着项目体量的增大,组件化和模块化的优势也愈发明显了,构建可重复使用、独立、可互操作的组件变得尤为重要,在JS中我们可以通过class和函数对代码解耦,使某段代码可以复用。在TS中我们也可以通过模块对代码进行模块化开发,在HTML页面中同样有一种技术可以实现独立的、可复用的组件,这便是本篇文章讲到的Web ComponentsWeb Components主要包括Custom Elements、Shadow DOM、HTML Templates和JavaScript这四部分,在后续的文章中我们会详细讲讲在熟悉原创 2023-08-28 14:20:34 · 1373 阅读 · 28 评论