HTML中slot内容分发 HTML中slot标签在Shadow DOM中的核心-html教程-PHP中文网

slot不渲染的常见原因包括：未调用attachShadow()、自定义元素未合法注册、外部节点层级过深、slot name大小写不匹配、过早调用assignedNodes()未加{flatten:true}、未监听slotchange事件，以及::slotted()样式使用超出单层选择器限制。

html中slot内容分发 html中slot标签在shadow dom中的核心

slot 不是普通 HTML 标签，它只在自定义元素的 Shadow DOM 内生效，且必须配合 attachShadow() 使用；直接写在页面里、或塞进

 里，完全没反应。为什么slot不渲染、内容没投射进来
常见错误是把自定义元素当普通容器用，比如：
<div>
  <my-card><h2 slot="title">Hello</h2></my-card>
</div>
这本身没问题，但问题往往出在组件实现侧：

没调用 attachShadow({ mode: 'open' })，或调用对象不是通过 customElements.define() 注册的合法自定义标签（如 ）
外部传入的节点层级太深：Hello 中， 是孙节点，不会被具名  匹配到
name 值大小写不一致，比如  对应  —— 不匹配
在 connectedCallback 里立刻查 assignedNodes()，但此时分发尚未完成，返回空数组


assignedNodes() 返回空？怎么拿到真实内容
assignedNodes() 默认只返回“直系分配节点”，即 Light DOM 中**直接子节点**中被该 slot 拦截到的部分。跨多层 slot 嵌套、或 fallback 内容都不会包含在内。
真正要拿到最终渲染进来的所有节点，得加参数：

											
												
												
													Html2md
													使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
												
												下载
												
											
										
slotElement.assignedNodes({ flatten: true })
另外，别依赖初始化时机获取内容：

监听 slotchange 事件才是可靠方式：slot.addEventListener('slotchange', handler)

Firefox 63 以下不支持 slotchange，需降级用 MutationObserver 监听 slot 元素的 childList


flatten: true 是关键，漏掉它，嵌套 slot 或 fallback 里的节点就“看不见”


::slotted() 样式为什么不起作用
::slotted() 只能作用于被分发进来的节点（即 Light DOM 中的内容），但它有硬性限制：

只能接受简单选择器，不能写 ::slotted(div h2) 或 ::slotted(.header > h2)，只支持 ::slotted(h2)、::slotted([slot="title"]) 这类单层匹配
它无法穿透多层嵌套：如果外部传入的是 …，::slotted(h2) 有效，但 ::slotted(article h2) 无效
样式隔离是单向的：组件内  默认不影响 slot 内容；但外部全局 CSS（如 p { color: red; }）仍会生效——这不是 bug，是规范行为

真正难的不是写对 ，而是理解“内容仍在 Light DOM、只是视觉上被投影”这个前提；所有事件绑定、样式穿透、节点查询逻辑，都得按这个模型来推演，否则很容易陷入“明明写了却没效果”的循环。