Web Component：向自定义元素传递显示数据，用Slot还是Attribute？

在Web Component开发里，给自定义元素传Shadow DOM要展示的数据时，别纠结哪个绝对最优——Attribute和Slot各有各的适用场景，得看你要传递的内容类型、复杂度以及需求来选：

用 Attribute 的情况 #

• 传递纯文本、简单字符串：比如按钮文字、卡片标题、状态标识这类内容
• 数据需要组件内部加工后再渲染：比如格式化日期、校验输入内容
• 习惯用原生HTML属性的方式配置组件，逻辑更贴合原生DOM的使用方式

Attribute 示例代码 #

JavaScript

class MyAttributeComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    const heading = this.getAttribute("heading");
    this.shadowRoot.innerHTML = `<h2>${heading}</h2>`;
  }
}
customElements.define("my-attribute-component", MyAttributeComponent);

HTML

<my-attribute-component heading="这是通过Attribute传递的标题"></my-attribute-component>

用 Slot 的情况 #

• 传递富内容：比如带HTML标签、自定义样式的文本，甚至嵌套其他组件
• 希望由父组件完全控制内容的结构和样式，组件只提供占位容器
• 需要传递多个独立内容块时，可以用具名Slot区分不同位置的内容

Slot 示例代码 #

JavaScript

class MySlotComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `<slot></slot>`;
  }
}
customElements.define("my-slot-component", MySlotComponent);

HTML

<my-slot-component>
  <h2 style="color: #2c3e50;">这是通过Slot传递的富文本标题</h2>
</my-slot-component>

选型总结 #

• 简单文本、配置类数据→选Attribute，简洁直接
• 富内容、需要父组件控制形态→选Slot，灵活度高
• 实际开发也可以混搭：用Attribute传配置参数，用Slot传核心展示内容

内容的提问来源于stack exchange，提问作者Rogier de Ruijter