Documentation

Documentation versions (currently viewingVaadin 23)

You are viewing documentation for Vaadin 23. View latest documentation

Dynamically Adding Server-Side Components to Templates

Polymer templates are deprecated. Lit templates are recommended instead.

Using the Slot Element

Example: <slot> element in a JavaScript Polymer template.

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class ComponentContainer extends PolymerElement {
  static get template() {
    return html`
      <div>
        <slot></slot>
      </div>
    `;
  }

  static get is() {
    return 'component-container';
  }
}

customElements.define(ComponentContainer.is, ComponentContainer);

Example: Mapped Java template class.

@Tag("component-container")
@JsModule("./com/example/component-container.js")
public class ComponentContainer extends PolymerTemplate<TemplateModel> {

    public ComponentContainer() {
        Element label = ElementFactory.createLabel("Main layout header");
        Element button = ElementFactory.createButton("Click me");

        getElement().appendChild(label, button);
    }
}
  • Without the <slot> tag in the JavaScript Polymer template, the label and button would not be visible to the user, even though they can be located in the DOM.

  • You can add multiple components that display in the slot when added to a template element with an open <slot></slot>.

  • You can remove any element from a <slot>. It works as expected and no longer display in the main element.

62162028-E8BC-4333-BEDD-CEB9DD2BFD73