lit element slot | lit element slot

The ::slotted() pseudo-element represents any element that has been placed into a slot inside an HTML template (see Using templates and slots for more information).

The slot property of the Element interface returns the name of the shadow DOM slot the element is inserted in.

The slot global attribute assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the element whose 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.

The snippet has two instances of <element-details> elements which both use the slot attribute to reference the named slots "element-name" and "description" we put in the <element-details> shadow root.