DEV Community

Cover image for HTML tags | slot
Carlos Espada
Carlos Espada

Posted on • Edited on

1

HTML tags | slot

The <slot> HTML element —part of the Web Components technology suite— is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

It defines a slot that is typically used in a shadow tree.

The name attribute is used to assign slots to other elements: a slot element with a name attribute creates a named slot to which any element is assigned if that element has a slot attribute whose value matches that name attribute's value, and the slot element is a child of the shadow tree whose root's host has that corresponding slot attribute value.

You can use the <template> and <slot> elements to create a flexible template that can then be used to populate the shadow DOM of a web component.

  • Type: -
  • Self-closing: No
  • Semantic value: No

Definition and example | Support

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay