> Markdown version of [Dynamically Add Server-Side Components to Templates](https://vaadin.com/docs/v24/flow/create-ui/templates/polymer/polymer-template-components-in-slot). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# Dynamically Add Server-Side Components to Templates (deprecated since V18)

> **Warning:** Polymer support has been deprecated since Vaadin 18 (released in November 2020), in favor of faster and simpler [Lit templates](https://vaadin.com/docs/v24/flow/create-ui/templates.md). 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](https://vaadin.com/docs/v24/upgrading.md#polymer-templates).

## <a id="using-the-slot-element"></a>Using the Slot Element

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

```javascript
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:

```java
@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`