From ea0ca291a7131e43cbdec4080762a0c8d05c320b Mon Sep 17 00:00:00 2001 From: Renzi Meng Date: Sun, 19 Apr 2020 02:42:29 -0700 Subject: [PATCH 01/27] =?UTF-8?q?Shadow=20DOM=20=E5=88=B0=E5=BA=95?= =?UTF-8?q?=E6=98=AF=E4=BB=80=E4=B9=88=EF=BC=9F=E5=AE=83=E4=B8=BA=E4=BB=80?= =?UTF-8?q?=E4=B9=88=E9=87=8D=E8=A6=81=EF=BC=9F=20(#6910)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * translate * update: format and translate issue * update: Issue about transation of Shadow DOM, Shadow Root, etc * Add annotations --- ...th-is-the-shadow-dom-and-why-it-matters.md | 116 +++++++++--------- 1 file changed, 58 insertions(+), 58 deletions(-) diff --git a/TODO1/what-on-earth-is-the-shadow-dom-and-why-it-matters.md b/TODO1/what-on-earth-is-the-shadow-dom-and-why-it-matters.md index 8a2780ce8bf..63a675d6d24 100644 --- a/TODO1/what-on-earth-is-the-shadow-dom-and-why-it-matters.md +++ b/TODO1/what-on-earth-is-the-shadow-dom-and-why-it-matters.md @@ -2,38 +2,38 @@ > * 原文作者：[Aphinya Dechalert](https://medium.com/@PurpleGreenLemon) > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/what-on-earth-is-the-shadow-dom-and-why-it-matters.md](https://github.com/xitu/gold-miner/blob/master/TODO1/what-on-earth-is-the-shadow-dom-and-why-it-matters.md) -> * 译者： -> * 校对者： +> * 译者：[Renzi](https://github.com/mengrenzi) +> * 校对者：[niayyy](https://github.com/niayyy-S), [Siva](https://github.com/IAMSHENSH) -# What on Earth is the Shadow DOM and Why Does it Matter? +# 影子 DOM（Shadow DOM）到底是什么？它为什么重要？ ![Photo by [Tom Barrett](https://unsplash.com/@wistomsin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/shadow?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)](https://cdn-images-1.medium.com/max/6538/1*wDb9Aw5YXEM_O8DqrsG0vQ.jpeg) -> Isn’t one DOM enough? +> 一个 DOM 还不够吗？ -We’ve all heard of the DOM at some point. It’s a topic that is quickly brushed over, and there’s not enough discussion of it. The name **shadow DOM** sounds somewhat sinister — but trust me, it’s not. +我们都曾听说过 DOM，它是一个容易被忽略的话题，而且对此也没有充足的讨论，**Shadow DOM** 这个名字听起来有点邪恶，但是相信我，它不是。 -The concept of DOMs is one of the foundations of the web and interfaces, and it’s deeply intertwined with JavaScript. +DOM 的概念是 Web 和界面的基础之一，并且与 JavaScript 息息相关。 -Many know what a DOM is. For starters, it stands for Document Object Model. But what does that mean? Why is it important? And how is understanding how it works relevant to your next coding project? +许多人都知道 DOM 是什么。首先，它代表文档对象模型。但这意味着什么？为什么它很重要？了解它如何工作与你的下一个编码项目有什么关系？ --- -Read on to find out. +继续往下看吧。 -## What Exactly Is a DOM? +## DOM 到底是什么？ -There’s a misconception that HTML elements and DOM are one and the same. However, they are separate and different in terms of functionality and how they are created. +有一种误解认为 HTML 元素和 DOM 是一回事。但是，它们在功能和创建方式上是独立且不同的。 -HTML is a markup language. Its sole purpose is to dress up content for rendering. It uses tags to define elements and uses words that are human-readable. It is a standardized markup language with a set of predefined tags. +HTML 是一种标记语言。其唯一目的是修饰呈现的内容。它使用标记来定义元素，并使用人类可读的单词。它是一种标准化的标记语言，具有一组预定义的标记。 -Markup languages are different from typical programming syntaxes because they don’t do anything other than create demarcations for content. +标记语言与典型的编程语法不同，因为标记语言只能用来创建内容分界。 -The DOM, however, is a constructed tree of objects that are created by the browser or rendering interface. In essence, it acts sort of like an API for things to hook into the markup structure. +然而，DOM 是由浏览器或渲染接口创建的对象构造的树。从本质上说，它有点像一个 API，用于将内容挂接到标记结构中。 -So what does this tree look like? +那么这棵树是什么样的呢？ -Let’s take a quick look at the HTML below: +让我们快速浏览以下 HTML： ```HTML @@ -48,69 +48,69 @@ Let’s take a quick look at the HTML below: ``` -This will result in the following DOM tree. +这将生成下面的 DOM 树。 ![](https://cdn-images-1.medium.com/max/2000/1*J8n54a_p1jI6bPPJIKufbg.jpeg) -Since all elements and any styling in an HTML document exist on the global scope, it also means that the DOM is one big globally scoped object. +由于 HTML 文档中的所有元素和样式都位于全局范围内，因此这也意味着 DOM 是一个大的全局作用域内的对象。 -`document` in JavaScript refers to the global space of a document. The `querySelector()` method lets you find and access a particular element type, regardless of how deeply nested it sits in the DOM tree, provided that you have the pathway to it correct. +`document` 在 JavaScript 中是指文档的全局空间。`querySelector()` 方法允许你查找和访问特定的元素类型，而不管它在 DOM 树中的嵌套有多深，只要你有正确的路径即可。 -For example: +比如： ```js document.querySelector(".heading"); ``` -This will select the first element in the document with `class="heading"`. +这将选择文档中带有 `class="heading"` 的第一个元素。 -Suppose you do something like the following: +假设你执行以下操作： ```js document.querySelector("p"); ``` -This will target the first `\

` element that exists in a document. +这将指向文档中存在的第一个 `\

` 元素。 -To be more specific, you can also do something like this: +具体来讲，你还可以执行以下操作： ```js document.querySelector("h1.heading"); ``` -This will target the first instance of `\

`. +这将指向第一个 `\

` 实例。 -Using `.innerHTML = ""` will give you the ability to modify whatever sits in between the tags. For example, you can do something like this: +使用 `.innerHTML = ""` 将使你能够修改标签之间的任何内容。例如，你可以这样做： ```js document.querySelector("h1").innerHTML = "Moooo!" ``` -This will change the content inside the first `\

` tags to `Moooo!`. +这会将第一个 `\

` 标签内的内容更改为 `Moooo!`。 --- -Now that we have the basics of DOMs sorted, let’s talk about when a DOM starts to exist within a DOM. +现在，我们已经梳理了 DOM 的基础知识，下面我们来讨论存在于 DOM 中的 DOM 的来历。 -## DOM Within DOMs (aka Shadow DOMs) +## 存在于 DOM 中的 DOM（又名 Shadow DOM） -There are times when a straight single-object DOM will suffice for all the requirements of your web app or web page. Sometimes, though, you need third-party scripts to display things without it messing with your pre-existing elements. +有时候，一个简单的单一对象 DOM 就可以满足 Web 应用程序或 Web 页面的所有需求。但是，有时你需要第三方脚本来显示内容，而不想它与你现有的元素混淆。 -This is where shadow DOMs come into play. +这就是 Shadow DOM 发挥作用的地方。 -Shadow DOMs are DOMs that sit in isolation, have their own set of scopes, and aren’t part of the original DOM. +Shadow DOM 是独立存在的 DOM，有自己的作用域集，不属于原始 DOM 的一部分。 -Shadow DOMs are essentially self-contained web components, making it possible to build modular interfaces without them clashing with one another. +Shadow DOM 本质上是独立的 Web 组件，使构建模块化的接口而不会相互冲突成为了可能。 -Browsers automatically attach shadow DOMs to some elements, such as `\` , `\