Slots

INFO

You can only used slots if the Shadow DOM is enabled.

Slots are like children in VanJS, but for Web Components.

javascript

define("slot-demo", () => p("Hello ", slot()));

html

<slot-demo><strong>Robert</strong> and <i>Marie</i></slot-demo>

Result

Robert and Marie

Slots can have names, which allows you to customize many different places in the Van Element.

javascript

define("slot-names", () =>
  div(
    h2(slot({ name: "title" })), // Named slot
    i("The Van Element 🍦"),
    slot() // Default slot
  )
);

html

<slot-names>
  <span slot="title">The title</span>
  <p>The paragraph</p>
</slot-names>

Result

The title

The paragraph

You will find more examples in the Examples section.

Slots ​