From 8d6a71840cad131bd153b6664834ac537f3f7aba Mon Sep 17 00:00:00 2001 From: ogaclejapan Date: Fri, 27 Dec 2019 08:23:59 +0900 Subject: [PATCH] Fix incorrect method call to querySelector --- 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 78f23fbb..66b89a71 100644 --- a/8-web-components/5-slots-composition/article.md +++ b/8-web-components/5-slots-composition/article.md @@ -103,11 +103,11 @@ The result is called "flattened" DOM: ...But the flattened DOM exists only for rendering and event-handling purposes. It's kind of "virtual". That's how things are shown. But the nodes in the document are actually not moved around! -That can be easily checked if we run `querySelector`: nodes are still at their places. +That can be easily checked if we run `querySelectorAll`: nodes are still at their places. ```js // light DOM nodes are still at the same place, under `` -alert( document.querySelector('user-card span').length ); // 2 +alert( document.querySelectorAll('user-card span').length ); // 2 ``` So, the flattened DOM is derived from shadow DOM by inserting slots. The browser renders it and uses for style inheritance, event propagation (more about that later). But JavaScript still sees the document "as is", before flattening.