4、Web开发中的Shadow DOM与事件处理

Web开发中的Shadow DOM与事件处理

1. 类型类初始化器与泛型

在处理属性类时，成员的初始化器是必要的。例如 datetime: string = ''; ，这是因为如果没有初始化器，TypeScript 编译器会为了减小代码包的大小而移除这些代码，并假定 JavaScript 可以处理这种情况（实际上也可以）。但在运行时，我们确实需要这些值，所以初始化器确保了属性的存在。只要不需要默认值，实际的值并不重要。

创建基类可能听起来复杂，甚至与易于使用的 Web 组件的简单性相矛盾。但创建基类只是一次性的任务，之后使用起来会容易很多。使用类型库中的类型化基接口示例，编辑器能够帮助选择正确的属性，从长远来看，这将提高代码质量。

2. Shadow DOM 概述

Shadow DOM 带来了封装性，它允许组件拥有自己独立的 DOM 树，这棵树不会被主文档意外访问，并且可以有本地样式规则等。在创建新组件时，开发者无需了解该组件所在的应用程序的具体情况，这进一步简化了开发过程。

在旧文献中可能会看到 <shadow> 和 <content> 元素，但它们已被弃用，不再是当前 Web 组件标准的一部分。

3. 准备工作

为了处理 Shadow DOM，建议使用 Chrome 浏览器。在开发者工具设置（F12）中，通过右上角的齿轮图标激活相应功能即可。当然，其他浏览器也支持此功能，但设置可能不同。

4. 内置 Shadow DOM

以