Web Components用slot组合内容

Web Components 可以在 Shadow DOM 里用 预留内容位置，再由调用方在组件标签内部提供标题、正文和操作项。具名插槽按 slot 与 name 对应，默认插槽接收没有指定名称的可分配节点，组件便能复用外壳而保留业务内容。

下面以原生 resource-card 资料卡为例，不依赖框架。示例代码供读者保存为 HTML 使用，本文不把代码推导或静态配图描述成实际运行记录。

官方规范地址：https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element

slot把组件外壳与业务内容分开

资料卡的边框、正文间距和底部容器属于组件；标题、说明段落和资料链接属于调用方。把业务文本硬写进模板，每次内容变化都要改组件。把标题作为字符串属性传入，又不方便容纳标题标签和链接等结构。插槽适合传入已有的 DOM 内容。

本例把 heading 用作标题槽名，把 actions 用作操作槽名，剩下的正文进入默认插槽。调用方节点仍位于宿主的 light DOM 中；分配关系让它们在影子树预留位置参与呈现，并不是组件把节点复制或移动到 Shadow DOM。

支持范围与普通HTML降级

HTML 标准的实现信息显示，slot 已获当前主要浏览器引擎支持，Internet Explorer 不支持。基础插槽、手动分配等扩展能力不能混为同一个兼容范围；本文只使用默认按名称分配，不使用 assign() 或实验性选择器。

示例检测自定义元素、Shadow DOM 和 assignedElements()，条件满足才注册组件。能力不足或者脚本未加载时，宿主里的标题、段落、链接仍按普通 HTML 保留。降级保留的是内容与链接功能，不承诺复制影子模板的排版，也不会凭空出现模板里的默认提示。

这个检测只用于选择本例的增强分支，不代表目标 WebView 的全部兼容性结论。项目若对旧环境有强制要求，可直接用普通 article 及页面 CSS 实现同一信息结构。

写一个可组合的资料卡

下面是一份无需依赖包的最小页面片段。把调用标记、详情区与模块脚本按给定顺序放进 HTML 的 body 即可。示例使用真实锚点作为操作链接，组件本身不负责业务跳转逻辑。

接口联调资料
  
整理请求字段、错误码和联调约定。
  阅读资料
资料详情
这里放详细说明。

模板只克隆组件内部结构，resource-card 的业务子节点没有被克隆。三个插槽各有一个稳定职责；底部是否显示，只由操作槽的直接分配元素数量决定。此处约定操作区传入元素，不能用裸文本充当操作项。

在这个标记结构下，应看到自定义标题、说明段落与资料链接；移除整个标题节点后，组件模板中的“资料卡”才承担标题；移除操作链接后底部容器隐藏。这些是根据标记与代码描述的行为预期，读者可在自己的目标环境中观察。

按名称匹配节点并理解默认内容

默认的名称分配从宿主的直接子节点考虑，不会越过任意包裹层寻找深处的 slot 属性。若把标题套进一个不带槽名的 div，再只给内部 h2 标记 slot="heading"，外层 div 会进入默认插槽，标题槽仍缺少对应分配。应把槽名标在实际要分配的宿主直接子元素上。

注意“没有可见文本”与“没有分配节点”不是一回事。空元素也可能占用插槽，默认插槽还可能接收到排版产生的空白文本。本例默认槽周围的换行就可能影响默认说明是否出现；不要用“肉眼看起来空”判断默认内容。需要默认说明时，应明确管理宿主的实际子节点，而不是只把正文字符串改为空。

同一影子树里重复定义同名插槽会让分配归属难以理解。本例每个名称只出现一次，不用复制插槽的方式把同一段内容显示两遍。

处理slotchange与样式边界

slotchange 用来跟踪分配集合的变化，例如新增、移除或改槽名。本例连接时读取一次操作槽，随后监听变化；断开时解除监听，再连接时重新订阅。不要假设构造函数执行时调用方的所有子节点都已经解析完成。

修改一个已分配元素内部的文字，或只更改它的后代，通常不会因为这类修改触发 slotchange。若业务必须感知子树文本，应由业务状态更新逻辑负责，或者另行设置范围明确、可清理的观察器。本例仅关心是否有操作元素，无需观察每个链接的内部文字。

assignedElements() 适合读取分配元素；如果任务要区分文本节点，才选择 assignedNodes()。本例不传 flatten，也不让默认内容冒充外部操作项。

影子模板中的 slot[name="heading"]::slotted(h2) 可匹配分配进来的 h2。它不能当作穿透任意后代的通用选择器，也不选择裸文本节点。如果标题里还有 em 等后代，应让调用方给内部内容设置类和样式，或者通过继承属性安排外观；不要在组件里堆叠跨边界选择器。

CSS规范地址：https://drafts.csswg.org/css-shadow-1/

控制更新成本并保留内容信任边界

slot 已能组合现有节点时，不必为了更新一个操作项就重建整个 shadowRoot。保留模板、在分配变化时读取必要集合，能让代码职责更明确；具体性能收益需要真实负载数据，本文不提供虚构倍数。

示例的 template.innerHTML 只接收开发者维护的常量。不要把外部输入拼入这个字符串；普通文字应通过 textContent 交给文本节点，富文本需按产品规则处理。插槽提供内容组合能力，本身不会把调用方内容转换成可信内容。

为什么只写slot标签看不出布局？ 插槽需要配合影子树中的组件模板使用，外层布局由模板容器决定，slot 标签本身不是一套卡片样式。

能把同一段标题放到两个插槽吗？ 单个节点的分配关系不能当作复制机制。需要两处显示时，应由数据生成两个明确的内容节点，并处理重复标题、标识和交互含义。

是否应该把所有数据都改成插槽？ 一段可组合的内容结构适合插槽；尺寸、主题、布尔开关等简单配置仍可使用属性或组件公开 API。先约定标题、正文、操作区这三个职责，再决定是否增加新的槽位。

DOM规则与事件参考：https://dom.spec.whatwg.org/#shadow-trees；https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event