本身不取数，仅作内容分发占位符；需配合 slotchange 事件与 assignedNodes() 手动提取数据，但推荐优先使用属性、事件、方法传递结构化数据。
Web Components 中的 <slot></slot> 本身不“取数”，它只是内容分发（content distribution）的占位符，不会主动读取、提取或返回数据。所谓“取 Web Components 数据”，实际是通过组合使用 <slot></slot> + 属性/事件/方法 + 父子通信机制来实现的。
slot 不是数据获取接口，而是 DOM 内容投射通道
<slot></slot> 的作用是在自定义元素内部“挖个洞”，让外部传入的 HTML 片段能渲染到指定位置。它不解析内容、不序列化数据、不触发响应式更新。
- 传入文本节点：
<my-card>Hello</my-card>→<slot></slot>显示 “Hello”，但组件内拿不到字符串 “Hello” 除非手动查slot.assignedNodes() - 传入带属性的元素：
<my-card><img src="a.jpg" data-id="123" alt="HTML5如何借助slot属性取WebComponents数据_HTML5插槽取数法【陈说】" ></my-card>→<slot></slot>渲染图片，但data-id不会自动变成组件的属性 - slot 没有
value、textContent或类似 React 的props.children返回值；它只有assignedNodes()和assignedElements()这类只读查询方法
想从 slot 内容中“取数”，得手动遍历 assignedNodes()
如果真需要从插槽里提取结构化信息（比如提取子元素的 data- 属性、文本内容或输入值），必须在组件内部监听 slotchange 事件，并调用 assignedNodes() 手动分析。
class MyForm extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<slot name="label"></slot>
<input type="text" id="field">
<slot name="hint"></slot>
`;
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
const nodes = slot.assignedNodes({ flatten: true });
// 注意：nodes 是 NodeList，不是实时集合，需重新获取
for (const node of nodes) {
if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('data-value')) {
console.log('从 slot 元素拿到:', node.dataset.value);
}
}
});
}
}
-
assignedNodes({ flatten: true })才能穿透<slot></slot>嵌套，拿到最底层真实节点 - 文本节点（
nodeType === 3）需用node.textContent.trim()提取，但注意前后空格和换行 - 动态插入的内容（如 JS append）不会触发
slotchange，得手动调用slot.assignedNodes()
更可靠的数据传递方式：别依赖 slot，改用属性或事件
把 slot 当作“数据源”容易踩坑——内容不可控、时机难把握、类型无保障。真正健壮的做法是明确划分职责：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 用属性传结构化数据：
<my-chart data='[{"x":1,"y":2}]' title="Sales"></my-chart>→ 组件内直接解析this.getAttribute('data') - 用事件通知外部变化：
this.dispatchEvent(new CustomEvent('submit', { detail: { value: this.input.value } })) - 用方法暴露内部状态：
myChart.getValue()或myChart.setData([...]) - slot 只负责 UI 布局，比如把标题、图标、操作按钮“摆进去”，而不是靠它传业务字段
slot.name 和 named slot 容易忽略的匹配规则
命名插槽（name="xxx"）不是模糊匹配，它严格按 slot 属性值一对一绑定，且不支持通配或 fallback 自动降级。
-
<my-card><p slot="header">Hi</p></my-card>→ 只有<slot name="header"></slot>能接住 - 如果组件模板里没写
<slot name="footer"></slot>，但用户写了<p slot="footer">...</p>，这部分内容会被丢弃（不显示也不报错） - 多个同名
slot不会合并内容，只会取第一个；多个同名外部元素也不会拼接，而是全部投射到同一个<slot></slot>中 - 默认插槽（无
name）接收所有未被命名插槽捕获的节点，但它不能和name=""混用 —— 后者是无效值，等同于无名
slot 的本质是声明式布局工具，不是数据桥接层。想让它“取数”，等于让插座去读电器型号——得靠额外电路（代码逻辑）配合才行。真正该花时间设计的是属性契约、事件规范和方法接口，而不是在 assignedNodes() 里反复 parse DOM。
