知秋

Shadow DOM 是 Web 组件的一个重要组成部分，它通过创建封装的 DOM 树，让组件的内部 DOM 和样式与外部页面隔离。这使得组件可以拥有独立的样式和功能，而不会与页面的其他部分发生冲突。传统上，开发人员需要通过 JavaScript 调用方法来手动创建 Shadow DOM，并附加到自定义元素上。这样的方式增加了代码的复杂性，同时在服务端渲染和静态页面生成中也难以直接使用。声明式 Shadow DOM。

在之前的学习中，我们已经掌握了stencilJs中的一些核心概念和基础知识，如装饰器PropStateEventListenMethodComponent以及生命周期方法。这些知识是构建复杂组件和应用的基础，而抽屉组件是一个很好的示例，能够综合运用这些知识，让我们更深入地理解它们的作用和用法。

我希望本次的 Web Components 标准之旅对你来说是有意义的。你看到我们已经走了多远，未来还有什么等待我们，这很有趣。随着 v1 版本的发布，过去几年中已经发布的功能翻了一番，以及即将到来令人兴奋的新功能，现在是成为 Web 开发人员的好时机。

前言作为开发者，我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML（以及相关的样式和脚本），有时您不得不写代码来呈现自定义UI控件，并且如果您不小心的话，多次使用它们会使您的页面变得一团糟。Web Components旨在解决这些问题 — 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。Custom elements（自定义元素）：一组JavaScript API，允许您定义custo

前言自定义元素允许使用扩展原生内置元素，支持增强已经存在的HTML元素，例如 img 和 button 。扩展现有HTML元素的好处是继承了元素的所有属性和方法。这允许对现有元素进行逐步的增强。这意味着即使在不支持自定义元素的浏览器中，它仍是可用的。它只会降级到默认的内置行为。而如果它是一个全新的HTML标签，那它将会完全无法使用。例如：我们想要增强一个HTML<button>标签class MyButton extends HTMLButtonElement { construct

概念和使用作为开发者，我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML（以及相关的样式和脚本），有时您不得不写代码来呈现自定义UI控件，并且如果您不小心的话，多次使用它们会使您的页面变得一团糟。Web Components旨在解决这些问题 — 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。• Custom elements（自定义元素）：一组JavaScript API，允许您定义