00后|互联网💻|办公室🍵茶农，希望通过技术改变生活|爱折腾💪|收集各类📚网络资源，好物不私藏，点点关注，不迷路。 全网搜：阿宇的编程之旅 or 阿宇的宝库

​在前面Web Components系列文章的插槽中，我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素，这么做会使标签在DOM多渲染一次，不仅降低了性能，还使标签直接暴露在页面中，遵循组件的可重用性、隔离性和封装性，Web Components提供了一种模板标签：template。它可以在DOM文档中定义模板，然后可以通过JavaScript动态地填充和显示这些模板，达到html组件封装的效果。

前言插槽实际上也属于组件通信的一种方式，但是由于其强大的api和实用性，我将其单独拆开来介绍。定义Slot（插槽）是Web Components中一个重要的特性，它允许在组件内部定义占位符，以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中，最终达到在父组件外部实现子组件的效果

我们常说到程序的运行和代码的实现遵循高内聚和低耦合，理解一下这句话，模块中的功能在逻辑上是有关联的，模块之间依赖关系较弱。前端的组件同样遵循这套原则，单个组件的功能逻辑是完整的，组件与组件之间也没有强关联，那么如何保证组件之间的联系呢？在Vue和React中一般使用props响应式通信、bus事件总线、Pinia，Vuex，Mobx全局状态等等方式进行数据传递，类似的本篇文章也将介绍Web组件的通信方式

前言本文继续Web Components系列文章，介绍一下Shadow DOM的样式及选择器。Shadow DOM的样式与外界是隔离的，即自定义元素的样式只会影响到Shadow DOM内部，不会影响到外部的页面元素，这点在之前有说到过。那么有什么办法可以在Shadow DOM中使用全局样式？样式选择器又有什么异同呢？请跟着本篇文章一起探究:host伪类作为伪类使用

上篇文章的自定义标签中，我们使用customElements对象对原生标签进行拓展，达到组件的拓展性与复用性的效果，那么如何保证组件的属性、结构及样式的封装隔离便是本篇文章将要分享的内容，本篇文章不仅仅会介绍Shadow DOM，还会对前面说到的Custom Elements做一个使用场景的拓展及深入探究在JS作用域一文中，我们提到全局作用域和局部作用域的概念，如果全局作用域没有处理好可能会导致作用域污染，出现问题。如果单纯的使用Custom Elements实现自定义组件的功能可能会存在样式冲突，Dom干

随着项目体量的增大，组件化和模块化的优势也愈发明显了，构建可重复使用、独立、可互操作的组件变得尤为重要，在JS中我们可以通过class和函数对代码解耦，使某段代码可以复用。在TS中我们也可以通过模块对代码进行模块化开发，在HTML页面中同样有一种技术可以实现独立的、可复用的组件，这便是本篇文章讲到的Web ComponentsWeb Components主要包括Custom Elements、Shadow DOM、HTML Templates和JavaScript这四部分，在后续的文章中我们会详细讲讲在熟悉