1. 首页

JavaScript它如何运行: Shadow DOM 的内部结构+如何编写独立的组件!

这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇。

如果你错过了前面的章节,可以在这里找到它们:

  1. JavaScript它如何运行:引擎,运行时和调用堆栈的概述!
  2. JavaScript它如何运行:深入V8引擎&编写优化代码的5个技巧!
  3. JavaScript它如何运行:内存管理+如何处理4个常见的内存泄漏!
  4. JavaScript它如何运行:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式!
  5. JavaScript它如何运行:深入探索 websocket 和HTTP/2与SSE +如何选择正确的路径!
  6. JavaScript它如何运行:与 WebAssembly比较 及其使用场景!
  7. JavaScript它如何运行:Web Workers的构建块+ 5个使用他们的场景!
  8. JavaScript它如何运行:Service Worker 的生命周期及使用场景!
  9. JavaScript它如何运行:Web 推送通知的机制!
  10. JavaScript是如何工作的:使用 MutationObserver 跟踪 DOM 的变化!
  11. JavaScript是如何工作的:渲染引擎和优化其性能的技巧!
  12. JavaScript是如何工作的:深入网络层 + 如何优化性能和安全!
  13. JavaScript是如何工作的:CSS 和 JS 动画底层原理及如何优化它们的性能!
  14. JavaScript的如何工作的:解析、抽象语法树(AST)+ 提升编译速度5个技巧!
  15. JavaScript是如何工作的:深入类和继承内部原理+Babel和 TypeScript 之间转换!
  16. JavaScript是如何工作的:存储引擎+如何选择合适的存储API!
  17. JavaScript它如何运行:JavaScript 的共享传递和按值传递

JS中文网 - 前端进阶资源分享

概述

Web Components 是一套不同的技术,允许你创建可重用的定制元素,它们的功能封装在你的代码之外,你可以在 Web 应用中使用它们。

Web组件由四部分组成:

  • Shadow DOM(影子DOM)
  • HTML templates(HTML模板)
  • Custom elements(自定义元素)
  • HTML Imports(HTML导入)

在本文中主要讲解 Shadow DOM(影子DOM)

Shadow DOM 这款工具旨在构建基于组件的应用。因此,可为网络开发中的常见问题提供解决方案:

  • 隔离 DOM:组件的 DOM 是独立的(例如,document.querySelector() 不会返回组件 shadow DOM 中的节点)。
  • 作用域 CSS:shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏,页面样式也不会渗入。
  • 组合:为组件设计一个声明性、基于标记的 API。
  • 简化 CSS – 作用域 DOM 意味着您可以使用简单的 CSS 选择器,更通用的 id/类名称,而无需担心命名冲突。

Shadow DOM

本文假设你已经熟悉 DOM 及其它的 Api 的概念。如果不熟悉,可以在这里阅读关于它的详细文章—— https://developer.mozilla.org…

阴影 DOM 只是一个普通的 DOM,除了两个区别:

  • 创建/使用的方式
  • 与页面其他部分有关的行为方式

    通常,你创建 DOM 节点并将其附加至其他元素作为子项。 借助于 shadow DOM,您可以创建作用域 DOM 树,该 DOM 树附加至该元素上,但与其自身真正的子项分离开来。这一作用域子树称为影子树。被附着的元素称为影子宿主。 您在影子中添加的任何项均将成为宿主元素的本地项,包括