jq 如何获取和当然元素相同类名的标签_「译」JavaScript 如何工作：Shadow DOM 内部结构+编写独立组件...

前言

该系列课程会在本周陆续更新完毕，主要讲解的都是工作中可能会遇到的真实开发中比较重要的问题以及相应的解决方法。通过本系列的课程学习，希望能对你日常的工作带来些许变化。当然，欢迎大家关注我，我将持续分享哪些前端层面核心的知识点，希望能给同处前端的你带来一点点收获。关于JavaScript引擎的理解欢迎大家阅读我写的以下文章：

《前端面试题系列：可能90%的前端开发都答不上来这道题》

《「译」JavaScript 如何工作：JavaScript 内存模型(进阶必备)》

《「译」JavaScript是如何工作的：引擎，运行时间和调用栈的概览》

《面试官：我们来聊聊Chrome中的V8隐藏类吧》

《高手进阶之史上最全JS内存管理策略剖析》

《浏览器事件循环必知必会10点》等等

1、概述

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

Web Component由四部分组成:

Shadow DOM(影子DOM)

HTML templates(HTML模板)

Custom elements(自定义元素)

HTML Imports(HTML导入)

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

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

1)隔离 DOM：组件的 DOM 是独立的(例如，document.querySelector() 不会返回组件 shadow DOM 中的节点)。

2)作用域 CSS：shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏，页面样式也不会渗入。

3)组合：为组件设计一个声明性、基于标记的 API。

4)简化 CSS - 作用域 DOM 意味着您可以使用简单的 CSS 选择器，更通用的 id/类名称，而无需担心命名冲突。

2、Shadow DOM

本文假设你已经熟悉 DOM 及其它的 Api 的概念。如果不熟悉，可以在这里阅读关于它的详细文章—— https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction。

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

1)创建/使用的方式

2)与页面其他部分有关的行为方式

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

3、创建 shadow DOM

影子根元素(shadow root)是附加到“宿主”元素的文档片段，当一个元素获得影子DOM的时刻也就意味着影子根元素被创建了。要为元素创建阴影 DOM，调用 element.attachShadow() :

var header = document.createElement('header');var shadowRoot = header.attachShadow({mode: 'open'});var paragraphElement = document.createElement('p');paragraphElement.innerText = 'Shadow DOM';shadowRoot.appendChild(paragraphElement);

规范定义了某些元素是无法托管影子树的。具体可参阅文末参考文献。

4、Shadow DOM的组合

组合是Shadow DOM最重要的特征之一。

编写HTML时，组合是构建Web应用程序的方式。 您可以组合并嵌套不同的构建块(元素)，例