You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 8-web-components/5-slots-composition/article.md
+3-2
Original file line number
Diff line number
Diff line change
@@ -130,6 +130,7 @@ For example, the second `<span>` here is ignored (as it's not a top-level child
130
130
If there are multiple elements in light DOM with the same slot name, they are appended into the slot, one after another.
131
131
132
132
For example, this:
133
+
133
134
```html
134
135
<user-card>
135
136
<spanslot="username">John</span>
@@ -268,7 +269,7 @@ The shadow DOM template with proper slots:
268
269
```
269
270
270
271
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.
272
273
273
274
The flattened DOM becomes:
274
275
@@ -380,7 +381,7 @@ If we'd like to track internal modifications of light DOM from JavaScript, that'
380
381
381
382
Finally, let's mention the slot-related JavaScript methods.
382
383
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:
384
385
385
386
-`node.assignedSlot` -- returns the `<slot>` element that the `node` is assigned to.
386
387
-`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