Vaadin LitTemplate复用疑问：如何将模板内VerticalLayout移至别处？

代码示例 #

@JsModule("./views/parents-editor-view.ts")
@Tag("parents-form-cloner-view")
public class DesignParentsCloner extends LitTemplate {
    @Id("fondsTemplate")
    private VerticalLayout fondsTemplate;
    // 省略其他代码
}

// 其他类中调用
DesignParentsCloner cloner = new DesignParentsCloner();
VerticalLayout templateLayout = cloner.getFondsTemplate();
addComponent(templateLayout); // 抛出异常：Trying to detach an element from parent that does not have it.

根据Vaadin LitTemplate的限制：可以向模板结构中添加组件和元素，但无法移除原始模板中的任何内容，不过可以覆盖组件属性。

需求场景：模板中定义了用于输入地址（姓名、街道、邮编、国家、地区等）的组件，需要在表单中允许用户创建不限数量的地址（类似亚马逊的地址管理功能）。

解决方案 #

1. 替换为Composite封装可复用组件

如果核心需求是复用某块布局并能自由移动它，直接放弃LitTemplate，改用Composite来封装组件。Composite允许你完全控制内部组件的归属，没有LitTemplate的移除限制。

示例代码：

public class AddressForm extends Composite<VerticalLayout> {
    public AddressForm() {
        VerticalLayout content = getContent();
        // 构建地址表单的所有组件
        content.add(
            new TextField("姓名"),
            new TextField("街道"),
            new TextField("邮编"),
            new ComboBox<>("国家"),
            new TextField("地区")
        );
        // 配置布局样式
        content.setPadding(true);
        content.setSpacing(true);
    }
}

使用时直接实例化，将内部布局添加到任意容器：

// 新增地址表单
AddressForm newAddress = new AddressForm();
addComponent(newAddress.getContent());

2. 克隆LitTemplate中的组件结构（如果必须保留LitTemplate）

如果因某些原因必须使用LitTemplate，不要尝试移除模板内的组件，而是克隆它的结构和配置，创建一个全新的布局实例：

DesignParentsCloner cloner = new DesignParentsCloner();
VerticalLayout templateLayout = cloner.getFondsTemplate();

// 创建新布局并复制原布局的配置
VerticalLayout clonedLayout = new VerticalLayout();
clonedLayout.setWidth(templateLayout.getWidth());
clonedLayout.setPadding(templateLayout.isPadding());
clonedLayout.setSpacing(templateLayout.isSpacing());

// 复制子组件（注意：组件clone是浅克隆，有状态的组件可能需要手动重置或深克隆）
templateLayout.getChildren().forEach(child -> {
    Component clonedChild = child.clone();
    // 如果是绑定了数据的组件，这里需要重置状态
    if (clonedChild instanceof TextField) {
        ((TextField) clonedChild).clear();
    }
    clonedLayout.add(clonedChild);
});

// 将克隆后的布局添加到目标容器
addComponent(clonedLayout);

3. 针对地址复用场景的最佳实践

对于需要动态新增多个地址的场景，推荐把地址表单做成独立的可复用组件（用Composite或普通Layout子类），每次用户点击"新增地址"时就创建一个新的组件实例，添加到表单中。这种方式不仅避开了LitTemplate的限制，也更符合Vaadin组件开发的最佳实践，状态管理也更清晰。

内容的提问来源于stack exchange，提问作者ropo