diff --git a/8-web-components/6-shadow-dom-style/article.md b/8-web-components/6-shadow-dom-style/article.md
index 2be81fbb21..60af219665 100644
--- a/8-web-components/6-shadow-dom-style/article.md
+++ b/8-web-components/6-shadow-dom-style/article.md
@@ -1,21 +1,21 @@
-# Shadow DOM styling
+# 给 Shadow DOM 添加样式
-Shadow DOM may include both `
```
-...Then the `` would be without padding.
+……那么 `` 将没有 padding。
-It's very convenient, as we can setup "default" component styles in its `:host` rule, and then easily override them in the document.
+这是非常有利的，因为我们可以在其 `:host` 规则中设置 “默认” 组件样式，然后在文档中轻松地覆盖它们。
-The exception is when a local property is labelled `!important`, for such properties, local styles take precedence.
+唯一的例外是当局部属性被标记 `!important` 时，对于这样的属性，局部样式优先。
## :host(selector)
-Same as `:host`, but applied only if the shadow host matches the `selector`.
+与 `:host` 相同，但仅在 shadow 宿主与 `selector` 匹配时才应用样式。
-For example, we'd like to center the `` only if it has `centered` attribute:
+例如，我们希望仅当 `` 具有 `centered` 属性时才将其居中:
```html run autorun="no-epub" untrusted height=80
@@ -109,32 +110,33 @@ customElements.define('custom-dialog', class extends HTMLElement {
```
-Now the additional centering styles are only applied to the first dialog: ``.
+现在附加的居中样式只应用于第一个对话框：``。
## :host-context(selector)
-Same as `:host`, but applied only if the shadow host or any of its ancestors in the outer document matches the `selector`.
+与 `:host` 相同，但仅当外部文档中的 shadow 宿主或它的任何祖先节点与 `selector` 匹配时才应用样式。
-E.g. `:host-context(.dark-theme)` matches only if there's `dark-theme` class on `` on anywhere above it:
+例如，`:host-context(.dark-theme)` 只有在 `` 或者 `` 的任何祖先节点上有 `dark-theme` 类时才匹配：
```html
...
```
-To summarize, we can use `:host`-family of selectors to style the main element of the component, depending on the context. These styles (unless `!important`) can be overridden by the document.
+总之，我们可以使用 `:host`-family 系列的选择器来对组件的主元素进行样式设置，具体取决于上下文。这些样式（除 `!important` 外）可以被文档样式覆盖。
+
+## 给占槽（ slotted ）内容添加样式
-## Styling slotted content
+现在让我们考虑有插槽的情况。
-Now let's consider the situation with slots.
+占槽元素来自 light DOM，所以它们使用文档样式。局部样式不会影响占槽内容。
-Slotted elements come from light DOM, so they use document styles. Local styles do not affect slotted content.
+在下面的例子中，按照文档样式，占槽的 `` 是粗体，但是它不从局部样式中获取 `background`：
-In the example below, slotted `` is bold, as per document style, but does not take `background` from the local style:
```html run autorun="no-epub" untrusted height=80
Name:
@@ -262,7 +264,7 @@ For example, in shadow DOM we can use `--user-card-field-color` CSS variable to
```
-Then, we can declare this property in the outer document for ``:
+然后，我们可以在外部文档中为 `` 声明此属性：
```css
user-card {
@@ -270,9 +272,9 @@ user-card {
}
```
-Custom CSS properties pierce through shadow DOM, they are visible everywhere, so the inner `.field` rule will make use of it.
+自定义 CSS 属性穿透 shadow DOM，它们在任何地方都可见，因此内部的 `.field` 规则将使用它。
-Here's the full example:
+以下是完整的示例：
```html run autorun="no-epub" untrusted height=80