用于内容分发的插槽元素
使用命名插槽和默认插槽将宿主内容投影到影子 DOM 中
用于内容分发的插槽元素 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
轻量 DOM 与影子 DOM
以 HTML 形式写在自定义元素内部的子元素构成该元素的“轻量 DOM”——它们不在影子树中。默认情况下，浏览器不会渲染它们；影子树必须通过 <slot> 显式请求这些子元素。
默认 slot
影子树中的 <slot> 元素标记了轻量 DOM 子元素应当出现的位置。不带名称的 slot 是默认 slot，会接受宿主的任何直接子元素。
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>命名 slot
可以通过名称定位多个 slot。影子树声明 <slot name="header">；用户通过 <h1 slot="header"> 选择使用它。带有匹配 slot 属性的子元素会填入该 slot；不匹配的子元素则会进入默认 slot。
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>slot 备用内容
slot 标签之间的内容仅在没有任何内容分配给该 slot 时才会渲染：<slot>No content provided</slot>。请使用它为为空的 slot 显示占位内容或指导性文字。
跨 slot 的样式继承
分配到 slot 的子元素仍然位于轻量 DOM 中，并继承主文档的样式，而不是影子树的样式。请在影子树内部使用 ::slotted() 伪元素为它们设置样式：::slotted(p) { color: red; }。
::slotted 的限制
::slotted() 只能定位宿主的直接子元素（实际被分配到 slot 中的元素），无法定位这些元素的后代。若要进行更深层的样式设置，请公开 CSS 自定义属性，或改用影子内部元素上的 ::part。
检测 slot 变化
每个 slot 在其分配的 nodes 发生变化时都会触发 slotchange 事件。请监听该事件，以响应动态内容更新：slot.addEventListener("slotchange", handler)。对于布局取决于当前有哪些子元素的组件，这一功能非常有用。
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes 与 assignedElements
slot.assignedNodes() 会返回分配给某个 slot 的所有 nodes（包括文本节点）。slot.assignedElements() 只会返回 Element 子元素——以编程方式遍历 slot 内容时，通常需要使用后者。
分配子元素
浏览器会根据每个子元素上的 slot 属性自动处理所有分配过程。这个过程不需要 JavaScript 步骤——只需在宿主的轻量子元素中写入 <span slot="footer">...</span>，对应的影子 slot 就会包含它。
slot 与宿主样式设置
宿主自身的样式（在文档中的 <my-card> 上设置）会级联到轻量子元素，包括最终被分配到 slot 中的子元素。当两者针对同一属性时，通过 ::slotted 设置的影子 CSS 具有比宿主继承样式更高的特异性。
常见使用场景
带有 header、body、footer slot 的卡片，带有 title、content、actions slot 的对话框，带有 leading、trailing slot 的列表项，以及带有 item slot 的导航菜单。slot 让自定义元素能够以与 <details>/<summary> 或 <table>/<tr> 相同的方式进行组合。
知识检查
默认 slot 与命名 slot 有什么区别？
总结
slot 会将轻量 DOM 子元素投影到影子树中的特定位置。默认 slot 接受任何未命名的子元素；命名 slot 接受带有匹配 slot 属性的子元素。备用内容会填充空 slot，::slotted 会为直接分配到 slot 的子元素设置样式，而 slotchange 事件会响应动态内容更新。
常见问题解答
「用于内容分发的插槽元素」课时是免费的吗？
是的 — 「用于内容分发的插槽元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「用于内容分发的插槽元素」这节课中我会学到什么？
使用命名插槽和默认插槽将宿主内容投影到影子 DOM 中 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「用于内容分发的插槽元素」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。