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, thelabel
andbutton
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