From ebb4682ac7b9ba05466937a2e5cc21d139a8bf32 Mon Sep 17 00:00:00 2001 From: Yixian Date: Wed, 24 Jul 2019 09:15:11 +0800 Subject: [PATCH 1/4] translate shadow dom --- 8-web-components/3-shadow-dom/article.md | 114 +++++++++++------------ 1 file changed, 56 insertions(+), 58 deletions(-) diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md index fafc4754c9..98187f9e0d 100644 --- a/8-web-components/3-shadow-dom/article.md +++ b/8-web-components/3-shadow-dom/article.md @@ -1,32 +1,32 @@ -# Shadow DOM +# 影子 DOM（Shadow DOM） -Shadow DOM serves for encapsulation. It allows a component to have its very own "shadow" DOM tree, that can't be accidentally accessed from the main document, may have local style rules, and more. +Shadow DOM 为封装而生。它可以让一个组件拥有自己的「影子」DOM 树，这个 DOM 树不能在主文档中被任意访问，可能拥有局部样式规则，还有其他特性。 -## Built-in shadow DOM +## 内建 shadow DOM -Did you ever think how complex browser controls are created and styled? +你是否曾经思考过复杂的浏览器控件是如何被创建和添加样式的？ -Such as ``: +比如 ``：

-The browser uses DOM/CSS internally to draw them. That DOM structure is normally hidden from us, but we can see it in developer tools. E.g. in Chrome, we need to enable in Dev Tools "Show user agent shadow DOM" option. +浏览器在内部使用 DOM/CSS 来绘制它们。这个 DOM 结构一般来说对我们是隐藏的，但我们可以在开发者工具里面看见它。比如，在 Chrome 里，我们需要打开「Show user agent shadow DOM」选项。 -Then `` looks like this: +然后 `` 看起来会像这样： ![](shadow-dom-range.png) -What you see under `#shadow-root` is called "shadow DOM". +你在 `#shadow-root` 下看到的就是被称为「shadow DOM」的东西。 -We can't get built-in shadow DOM elements by regular JavaScript calls or selectors. These are not regular children, but a powerful encapsulation technique. +我们不能使用一般的 JavaScript 调用或者选择器来获取内建 shadow DOM 元素。它们不是常规的子元素，而是一个强大的封装手段。 -In the example above, we can see a useful attribute `pseudo`. It's non-standard, exists for historical reasons. We can use it style subelements with CSS, like this: +在上面的例子中，我们可以看到一个有用的属性 `pseudo`。这是一个因为历史原因而存在的属性，并不在标准中。我们可以使用它来给子元素加上 CSS 样式，像这样： ```html run autorun @@ -116,7 +116,7 @@ For example: ``` +1. 文档里面的样式对 shadow tree 没有任何效果。 +2. ……但是内部的样式是有效的。 +3. 为了获取 shadow tree 内部的元素，我们可以从树的内部查询。 -1. The style from the document does not affect the shadow tree. -2. ...But the style from the inside works. -3. To get elements in shadow tree, we must query from inside the tree. +## 参考 -## References +- DOM： +- 兼容性： +- Shadow DOM 在很多其他标准中被提到，比如：[DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) 指定了shadow root 有 `innerHTML`。 -- DOM: -- Compatibility: -- Shadow DOM is mentioned in many other specifications, e.g. [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) specifies that shadow root has `innerHTML`. +## 总结 +Shadow DOM 是创建组件级别 DOM 的一种方法。 -## Summary +1. `shadowRoot = elem.attachShadow({mode: open|closed})` —— 为 `elem` 创建 shadow DOM。如果 `mode="open"`，那么它通过 `elem.shadowRoot` 属性被访问。 +2. 我们可以使用 `innerHTML` 或者其他 DOM 方法来扩展 `shadowRoot`。 -Shadow DOM is a way to create a component-local DOM. +Shadow DOM 元素： +- 有自己的 id 空间。 +- 对主文档的 JavaScript 选择器隐身，比如 `querySelector`。 +- 只使用 shadow tree 内部的样式，不使用主文档的样式。 -1. `shadowRoot = elem.attachShadow({mode: open|closed})` -- creates shadow DOM for `elem`. If `mode="open"`, then it's accessible as `elem.shadowRoot` property. -2. We can populate `shadowRoot` using `innerHTML` or other DOM methods. - -Shadow DOM elements: -- Have their own ids space, -- Invisible to JavaScript selectors from the main document, such as `querySelector`, -- Use styles only from the shadow tree, not from the main document. - -Shadow DOM, if exists, is rendered by the browser instead of so-called "light DOM" (regular children). In the chapter we'll see how to compose them. +Shadow DOM，如果存在的话，会被侯览器渲染而不是所谓的 「light DOM」（普通子元素）。在 章节中我们将会看到如何组织它们。 From 49f1944c9b9fc78a20f149ca06953fcd6e04ada4 Mon Sep 17 00:00:00 2001 From: Yixian Date: Wed, 24 Jul 2019 09:22:40 +0800 Subject: [PATCH 2/4] add empty lines --- 8-web-components/3-shadow-dom/article.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md index 98187f9e0d..1dd195a56d 100644 --- a/8-web-components/3-shadow-dom/article.md +++ b/8-web-components/3-shadow-dom/article.md @@ -130,6 +130,7 @@ Shadow DOM 被非常明显地和主文档分开： alert(elem.shadowRoot.querySelectorAll('p').length); // 1 ``` + 1. 文档里面的样式对 shadow tree 没有任何效果。 2. ……但是内部的样式是有效的。 3. 为了获取 shadow tree 内部的元素，我们可以从树的内部查询。 @@ -140,6 +141,7 @@ Shadow DOM 被非常明显地和主文档分开： - 兼容性： - Shadow DOM 在很多其他标准中被提到，比如：[DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) 指定了shadow root 有 `innerHTML`。 + ## 总结 Shadow DOM 是创建组件级别 DOM 的一种方法。 From 1e8b861f75803c9f053dda0a2d1421d7c8b2ec19 Mon Sep 17 00:00:00 2001 From: LycheeEng Date: Wed, 24 Jul 2019 20:10:28 +0800 Subject: [PATCH 3/4] fix format --- 8-web-components/3-shadow-dom/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md index 1dd195a56d..1cc27376d9 100644 --- a/8-web-components/3-shadow-dom/article.md +++ b/8-web-components/3-shadow-dom/article.md @@ -44,9 +44,9 @@ input::-webkit-slider-runnable-track { 一个 DOM 元素可以有以下两类 DOM 子树： 1. Light tree（光明树） —— 一个常规 DOM 子树，由 HTML 子元素组成。我们在之前章节看到的所有子树都是「光明的」。 -2. Shadow tree（影子树）—— 一个隐藏的 DOM 子树，不在 HTML 中反映，无法被察觉。 +2. Shadow tree（影子树） —— 一个隐藏的 DOM 子树，不在 HTML 中反映，无法被察觉。 -如果一个元素同时有以上两种子树，那么浏览器只渲染 shadow tree。但是我们同样可以设置两种树的组合。我们将会在后面的章节中看到更多细节。 +如果一个元素同时有以上两种子树，那么浏览器只渲染 shadow tree。但是我们同样可以设置两种树的组合。我们将会在后面的章节 中看到更多细节。 影子树可以在自定义元素中被使用，其作用是隐藏组件内部结构和添加只在组件内有效的样式。 @@ -71,11 +71,11 @@ customElements.define('show-hello', class extends HTMLElement { ![](shadow-dom-say-hello.png) -首先，调用 `elem.attachShadow({mode: …})` 可以创建一个shadow tree。 +首先，调用 `elem.attachShadow({mode: …})` 可以创建一个 shadow tree。 这里有两个限制： 1. 在每个元素中，我们只能创建一个 shadow root。 -2. `elem` 必须是自定义元素，或者是以下元素的其中一个：「article」、「aside」、「blockquote」、「body」、「div」、「footer」、「h1..h6」、「header」、「main」、「nav」、「p」、「section」或者「span」。其他元素，比如``，不能容纳 shadow tree。 +2. `elem` 必须是自定义元素，或者是以下元素的其中一个：「article」、「aside」、「blockquote」、「body」、「div」、「footer」、「h1..h6」、「header」、「main」、「nav」、「p」、「section」或者「span」。其他元素，比如 ``，不能容纳 shadow tree。 `mode` 选项可以设定封装层级。他必须是以下两个值之一： - `「open」` —— shadow root 可以通过 `elem.shadowRoot` 访问。 @@ -83,7 +83,7 @@ customElements.define('show-hello', class extends HTMLElement { 任何代码都可以访问 `elem` 的 shadow tree。 - `「closed」` —— `elem.shadowRoot` 永远是 `null`。 - 我们只能通过 `attachShadow` 返回的指针来访问 shadow DOM （并且可能隐藏在一个 class 中）。浏览器原生的 shadow tree，比如 ``，是封闭的。没有任何方法可以访问它们。 + 我们只能通过 `attachShadow` 返回的指针来访问 shadow DOM（并且可能隐藏在一个 class 中）。浏览器原生的 shadow tree，比如 ``，是封闭的。没有任何方法可以访问它们。 `attachShadow` 返回的 [shadow root](https://dom.spec.whatwg.org/#shadowroot)，和任何元素一样：我们可以使用 `innerHTML` 或者 DOM 方法，比如 `append` 来扩展它。 @@ -139,7 +139,7 @@ Shadow DOM 被非常明显地和主文档分开： - DOM： - 兼容性： -- Shadow DOM 在很多其他标准中被提到，比如：[DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) 指定了shadow root 有 `innerHTML`。 +- Shadow DOM 在很多其他标准中被提到，比如：[DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) 指定了 shadow root 有 `innerHTML`。 ## 总结 From 160db84481c8fc2c7d098695549638c1543e7fab Mon Sep 17 00:00:00 2001 From: Yixian Date: Sun, 28 Jul 2019 11:15:36 +0800 Subject: [PATCH 4/4] fix format and a typo --- 8-web-components/3-shadow-dom/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md index 1cc27376d9..fcf8a3ce4e 100644 --- a/8-web-components/3-shadow-dom/article.md +++ b/8-web-components/3-shadow-dom/article.md @@ -106,7 +106,7 @@ Shadow DOM 被非常明显地和主文档分开： ```html run untrusted height=40 @@ -154,4 +154,4 @@ Shadow DOM 元素： - 对主文档的 JavaScript 选择器隐身，比如 `querySelector`。 - 只使用 shadow tree 内部的样式，不使用主文档的样式。 -Shadow DOM，如果存在的话，会被侯览器渲染而不是所谓的 「light DOM」（普通子元素）。在 章节中我们将会看到如何组织它们。 +Shadow DOM，如果存在的话，会被浏览器渲染而不是所谓的 「light DOM」（普通子元素）。在 章节中我们将会看到如何组织它们。