Documentation

Documentation versions (currently viewingVaadin 23)

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 will display in the slot when added to a template element with an open <slot></slot>.

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

62162028-E8BC-4333-BEDD-CEB9DD2BFD73