原生JS克隆后如何正确初始化Tailwind Elements Datepicker

Tailwind Elements 默认只会在页面首次加载时，扫描页面内带data-mdb-toggle="datepicker"属性的元素完成组件初始化。你通过cloneNode动态插入的表单节点不在初始扫描范围内，组件没有绑定交互事件，自然无法正常运行。另外你贴的现有代码还有两处基础写法错误，先修正再做初始化即可。

• DOM插入逻辑写反了：应该是把克隆出的新表单节点追加到body中，而非把body追加到新表单节点上，正确写法为document.body.appendChild(newForm)
• 元素选择器方法名拼写错误：原生DOM选择器方法是querySelector，不是querySelect

Tailwind Elements 所有组件都挂载在全局tw命名空间下，日期选择器对应的构造类为Datepicker。注意必须先把克隆的节点插入到DOM树后，再执行组件初始化，否则组件无法正确获取DOM位置、尺寸参数，会出现弹层偏移、不显示的问题。
完整实现代码如下：

import 'tw-elements';

// 绑定新增表单按钮的点击事件，替换成你实际的按钮选择器即可
const addFormBtn = document.querySelector('#add-form-btn');
const formTemplate = document.querySelector('#temp');

addFormBtn.addEventListener('click', () => {
  // 克隆模板内容
  const newFormFragment = formTemplate.content.cloneNode(true);
  // 提前取到表单元素引用，避免后续找错节点
  const newForm = newFormFragment.querySelector('form');
  // 先把新表单插入页面DOM
  document.body.appendChild(newForm);
  // 找到当前新表单内的日期选择器容器
  const datepickerEl = newForm.querySelector('.datepicker');
  // 手动初始化日期选择器实例，配置项和你之前写在data属性上的规则一一对应
  new tw.Datepicker(datepickerEl, {
    toggleButton: false
  });
})

• 如果你动态生成的表单里还有其他Tailwind Elements组件，初始化逻辑完全一致：找到对应DOM元素后，通过new tw.组件名(元素, 配置项)的方式创建实例即可，例如下拉组件对应tw.Select、弹窗组件对应tw.Modal，类名和组件名完全对应。
• 所有原来通过data-mdb-*属性配置的参数，都可以转成驼峰命名的键值对，传入构造函数的第二个配置对象中，效果和写data属性完全一致。
• 不建议通过:last-child这类选择器找刚插入的节点，提前在文档片段里拿到表单元素的引用再操作，不会受页面其他元素干扰，稳定性更高。

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