Skip to content

Commit

Permalink
More info
Browse files Browse the repository at this point in the history
  • Loading branch information
Josh-Cena committed Feb 19, 2025
1 parent f718892 commit 9869045
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,9 @@ or
And that's it for our trivial example.
If you want to play with it some more, you can [find it on GitHub](https://github.com/mdn/web-components-examples/tree/main/simple-template) (see it [running live](https://mdn.github.io/web-components-examples/simple-template/) also).

A slot can be defined without a name attribute (or with `name=""`), which creates a default slot that will capture any content not explicitly assigned to a named slot. Here's an example:
The `name` attribute should be unique per shadow root: if you have two slots with the same name, all of the elements with a matching `slot` attribute will be assigned to the first slot with that name. But the `slot` attribute does not need to be unique: a `<slot>` can be filled by multiple elements that all have a matching `slot` attribute.

The `name` and `slot` attributes both default to the empty string, so elements with no `slot` attributes are assigned to the `<slot>` with no `name` attribute (the unnamed slot, or default slot). Here's an example:

```html
<template id="custom-paragraph">
Expand Down
5 changes: 1 addition & 4 deletions files/en-us/web/html/element/slot/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@ The **`<slot>`** [HTML](/en-US/docs/Web/HTML) element—part of the [Web Compone
This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).

- `name`

- : The slot's name.

A **_named slot_** is a `<slot>` element with a `name` attribute.
- : The slot's name. When the slot's containing component gets rendered, the slot is rendered with the custom element's child that has a matching [`slot`](/en-US/docs/Web/HTML/Global_attributes/slot) attribute. A _named slot_ is a `<slot>` element with a `name` attribute. Unnamed slots have the name default to the empty string. Names should be unique per shadow root: if you have two slots with the same name, all of the elements with a matching `slot` attribute will be assigned to the first slot with that name.

## Examples

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/html/global_attributes/slot/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ browser-compat: html.global_attributes.slot

{{HTMLSidebar("Global_attributes")}}

The **`slot`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) assigns a slot in a [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) shadow tree to an element: An element with a `slot` attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose [`name`](/en-US/docs/Web/HTML/Element/slot#name) attribute's value matches that `slot` attribute's value.
The **`slot`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) assigns a slot in a [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) shadow tree to an element: An element with a `slot` attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose [`name`](/en-US/docs/Web/HTML/Element/slot#name) attribute's value matches that `slot` attribute's value. You can have multiple elements assigned to the same slot by using the same slot name. Elements without a `slot` attribute are assigned to the unnamed slot, if one exists.

For examples, see our [Using templates and slots](/en-US/docs/Web/API/Web_components/Using_templates_and_slots) guide.

Expand Down

0 comments on commit 9869045

Please sign in to comment.