前言在上一节中，使用 Templates 实现了 MyCard 的基本布局，并且在文章结尾我也说过，因为不可复用，其实用性基本为零。 今天我们通过使用具名 Slots 在 Templates 中占位，然后再在自定义元素中给 Slots 传值，提高自...

前言前面针对 Web Components 学习了一些基本的理论知识，我们了解到的概念有： Custom ElementsShadow DOMTemplatesSlots 以及和这些概念相关的子知识点。 理论知识基本上够用了，从现在开始我们需要将...

前言在上一节我们了解了如何给自定义组件设置样式，当时是将自定义标签的样式设置在主 DOM 中的： my-card { display: block; margin: 20px; width: 200...

前言何谓”生命周期“？顾名思义，生命周期就是指一个物体从产生前到消亡后的整个过程，当然，不同物体的生命周期具体阶段划分可能不太一样。 我们在使用前端组件框架的时候，都知道每个组件都有各自的生命周期，明确了组件生命周期后，开发者就可以在组件的不同生命...

前言熟悉 Vue 的同学应该都知道”插槽（slot）“的概念，通过使用插槽可以让页面内容的组织更加灵活。 在 Web Components 体系中也有插槽的概念，今天我们就来具体了解一下 Slots，本文主要包括以下内容： 为什么要用 Slo...

前言熟悉 Vue 的同学应该都知道”插槽（slot）“的概念，通过使用插槽可以让页面内容的组织更加灵活。 在 Web Components 体系中也有插槽的概念，今天我们就来具体了解一下 Slots，本文主要包括以下内容： 为什么要用 Slo...

前言在之前介绍创建 Custom Elements 的代码中，有一个地方是比较繁琐的：Shadow DOM 中的每个子元素都是通过 document.createElement 方法创建的。就像下面这样的： 那到底有没有方法能简化这一步操作呢？...

前言在初涉前端之时，我就一直在好奇一个问题，为什么像： …… 等等这些标签，看起来似乎很简单，可为什么可以展现出那么丰富复杂的布局？当时我给自己的解释是：这些标签...

前言根据前面的介绍，我们知道根据是否继承基本 HTML 元素，可以将自定义元素分为两类“ Autonomous custom elements 自主定制元素Customized built-in elements 自定义内置元素 由此产生了一个疑...

前言在上一篇文章中介绍了 Web Components 的相关概念，知道它是浏览器用来原生支持“组件化”的方法，并且知晓它的技术组成为： Custom ElementsShadow DOMHTML templates 今天，我们就来学习它的技术之...