Documentation

Polymer support is deprecated. Use Lit templates instead.

Documentation

Dynamically Add Server-Side Components to Templates

Polymer support is deprecated; use Lit templates instead.
Warning

Polymer support has been deprecated since Vaadin 18 (released in November 2020), in favor of faster and simpler Lit templates. The built-in support for Polymer templates has been removed and is only available as a commercial add-on. However, a free conversion tool is available to assist in converting Polymer templates to Lit.

Read more about setting up the commercial Polymer templates addon in the Upgrade Guide.

Using the Slot Element

You can see the <slot> element in a JavaScript Polymer template in this example:

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);

This example shows a 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 displays in the main element.

62162028-E8BC-4333-BEDD-CEB9DD2BFD73