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 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.
62162028-E8BC-4333-BEDD-CEB9DD2BFD73