如何通过jQuery向自定义元素的setter方法传递数据

你设想的写法不能正常运行。因为$('my-custom-element-example')返回的是jQuery封装的元素集合对象，并非自定义元素的原生DOM实例，直接给这个jQuery对象添加customData属性，无法触发你在自定义元素类中定义的setter方法。

正确实现方式 #

单元素赋值

如果页面只有一个目标自定义元素，直接取jQuery集合中第一项的原生DOM实例再赋值即可：

$('my-custom-element-example')[0].customData = {name: "DERI KURNIAWAN"};
// 也可以用jQuery的get方法取原生实例
// $('my-custom-element-example').get(0).customData = {name: "DERI KURNIAWAN"};

多元素批量赋值

如果需要给多个匹配的自定义元素统一传值，可以用each遍历：

$('my-custom-element-example').each(function() {
  // 遍历回调内的this指向当前项的原生DOM实例
  this.customData = {name: "DERI KURNIAWAN"};
});

注意事项 #

• 不要使用jQuery自带的.data()方法做这个操作：jQuery的.data()是框架自身维护的缓存数据，不会触发你定义的setter，也不会直接挂载到DOM实例上，无法实现你要的效果。
• 建议在自定义元素完成注册后再执行赋值操作，避免因注册顺序问题导致setter不生效，可以用如下方式保证执行时机：

customElements.whenDefined('my-custom-element-example').then(() => {
  $('my-custom-element-example')[0].customData = {name: "DERI KURNIAWAN"};
});

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