如何向Web Component的Shadow DOM传递对象与函数？

问题原因 #

你遇到的核心问题是：

• HTML属性仅支持字符串类型，直接给自定义元素实例赋值x.customAttribute是给DOM实例添加了一个JS属性，并非HTML属性，因此attributeChangedCallback不会触发（该回调仅监听HTML属性的变更，即标签上custom-attribute="xxx"这类声明的属性）。
• 即便用setAttribute传递对象/函数，也会被强制转为字符串（比如函数会变成[object Function]），无法保留引用类型的特性。

可行解决方案 #

方案1：使用自定义元素的实例属性 + Getter/Setter

这是传递函数/对象最直接的方式，通过在组件类中定义getter和setter，直接处理JS引用类型数据：

// web-component declaration file
class MyComponent extends HTMLElement {
  constructor() {
    super();
    this._customData = null;
    this.attachShadow({ mode: 'open' });
  }

  // 定义getter获取数据
  get customData() {
    return this._customData;
  }

  // 定义setter接收并处理数据
  set customData(value) {
    this._customData = value;
    // 这里可以添加数据接收后的逻辑，比如更新Shadow DOM
    console.log('接收的数据:', value);
    // 示例：如果是函数可直接调用
    if (Array.isArray(value) && typeof value[0] === 'function') {
      value[0](); // 会打印'hi'
    }
  }
}

customElements.define('my-component', MyComponent);

外部使用：

// other file
const x = document.createElement('my-component');
x.customData = [function(){console.log('hi')}];
document.body.appendChild(x);

方案2：通过自定义事件传递数据

适合组件挂载后异步传递数据的场景，通过事件的detail字段携带引用类型：

组件内部代码：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    // 监听自定义事件
    this.addEventListener('custom-data', this.handleData.bind(this));
  }

  handleData(e) {
    const data = e.detail;
    console.log('通过事件接收的数据:', data);
    // 执行数据处理逻辑
  }
}

customElements.define('my-component', MyComponent);

外部触发事件：

// other file
const x = document.createElement('my-component');
document.body.appendChild(x);

// 发送自定义事件传递数据
x.dispatchEvent(new CustomEvent('custom-data', {
  detail: [function(){console.log('hi')}],
  bubbles: false,
  cancelable: true
}));

方案3：HTML属性 + 序列化（仅适用于可序列化数据）

注意：此方法无法传递函数，仅适合纯数据对象，通过JSON序列化/反序列化实现：

组件内部代码：

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return ['custom-attribute'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (attrName === 'custom-attribute') {
      try {
        const data = JSON.parse(newVal);
        console.log('解析后的属性数据:', data);
      } catch (e) {
        console.error('属性解析失败:', e);
      }
    }
  }
}

customElements.define('my-component', MyComponent);

外部使用：

// other file
const x = document.createElement('my-component');
// 仅能传递可JSON序列化的数据
x.setAttribute('custom-attribute', JSON.stringify({ name: 'test', value: 123 }));
document.body.appendChild(x);

总结 #

• 传递函数/复杂对象：优先使用实例属性的getter/setter，符合JS原生特性，最便捷。
• 异步传递场景：使用自定义事件，灵活可控。
• 简单数据传递：可使用HTML属性配合序列化，但无法处理函数等不可序列化类型。

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