Skip to content

Commit 5e280a3

Browse files
authored
Merge pull request javascript-tutorial#386 from odsantos/update-en-shadow-dom
Update "Shadow DOM slots, composition" article
2 parents ed19dd9 + 8e92cc3 commit 5e280a3

File tree

1 file changed

+3
-2
lines changed

1 file changed

+3
-2
lines changed

8-web-components/5-slots-composition/article.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ For example, the second `<span>` here is ignored (as it's not a top-level child
130130
If there are multiple elements in light DOM with the same slot name, they are appended into the slot, one after another.
131131

132132
For example, this:
133+
133134
```html
134135
<user-card>
135136
<span slot="username">John</span>
@@ -268,7 +269,7 @@ The shadow DOM template with proper slots:
268269
```
269270

270271
1. `<span slot="title">` goes into `<slot name="title">`.
271-
2. There are many `<li slot="item">` in the template, but only one `<slot name="item">` in the template. So all such `<li slot="item">` are appended to `<slot name="item">` one after another, thus forming the list.
272+
2. There are many `<li slot="item">` in the `<custom-menu>`, but only one `<slot name="item">` in the template. So all such `<li slot="item">` are appended to `<slot name="item">` one after another, thus forming the list.
272273

273274
The flattened DOM becomes:
274275

@@ -380,7 +381,7 @@ If we'd like to track internal modifications of light DOM from JavaScript, that'
380381

381382
Finally, let's mention the slot-related JavaScript methods.
382383

383-
As we've seen before, JavaScript looks at the "real" DOM, without flattening. But, if the shadow tree has `{mode: 'open'}`, then we can figure out which elements assigned to a slot and, vise-versa, the slot by the element inside it:
384+
As we've seen before, JavaScript looks at the "real" DOM, without flattening. But, if the shadow tree has `{mode: 'open'}`, then we can figure out which elements assigned to a slot and, vice-versa, the slot by the element inside it:
384385

385386
- `node.assignedSlot` -- returns the `<slot>` element that the `node` is assigned to.
386387
- `slot.assignedNodes({flatten: true/false})` -- DOM nodes, assigned to the slot. The `flatten` option is `false` by default. If explicitly set to `true`, then it looks more deeply into the flattened DOM, returning nested slots in case of nested components and the fallback content if no node assigned.

0 commit comments

Comments
 (0)