From f903239569e1d0f3081fc1e5452440ec4f6d4ef4 Mon Sep 17 00:00:00 2001 From: Songhn Date: Sat, 15 Jan 2022 20:30:36 +0800 Subject: [PATCH] fix(web-components/slots): querySelectorAll --- 8-web-components/5-slots-composition/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md index 5dc25baeb1..f450f3f9ba 100644 --- a/8-web-components/5-slots-composition/article.md +++ b/8-web-components/5-slots-composition/article.md @@ -103,11 +103,11 @@ customElements.define('user-card', class extends HTMLElement { ……但是 "flattened" DOM 仅仅被创建用来渲染和事件处理，是“虚拟”的。虽然是渲染出来了，但文档中的节点事实上并没有到处移动！ -如果我们调用 `querySelector` 那就很容易验证：节点仍在它们的位置。 +如果我们调用 `querySelectorAll` 那就很容易验证：节点仍在它们的位置。 ```js // light DOM 节点位置依然不变，在 `` 里 -alert( document.querySelector('user-card span').length ); // 2 +alert( document.querySelectorAll('user-card span').length ); // 2 ``` 因此，扁平化 DOM 是通过插入插槽从 shadow DOM 派生出来的。浏览器渲染它并且用于样式继承、事件传播。但是 JavaScript 在扁平前仍按原样看到文档。