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`

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

customElements.define(, ComponentContainer);

Example: Mapped Java template class.

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.