如何利用HTML插槽（Slot）机制实现组件内容投影-html教程-PHP中文网

slot不是模板语法糖，仅在自定义元素启用shadow dom且调用attachshadow()后生效；未满足此前提、slot未写入shadow dom内、外部内容非直系子元素或name不严格匹配时，内容静默丢弃。

如何利用html插槽（slot）机制实现组件内容投影

slot 不是模板语法糖，也不是框架专属功能——它只在自定义元素的 Shadow DOM 中生效，且必须调用 attachShadow() 才能工作。没挂影子根，slot 标签就是一段被忽略的纯文本。

为什么写了 `<slot></slot>` 却什么都没显示

最常见原因是：自定义元素没启用 Shadow DOM，或调用 attachShadow() 的时机/位置错误。

必须在 constructor 或 connectedCallback 中执行 this.attachShadow({ mode: "open" })；重复调用会抛错，不调用则整个分发链失效
<slot></slot> 必须写在 Shadow DOM 内部（比如 shadowRoot.innerHTML 或 template.content 里），不能直接塞进 <my-card><slot></slot></my-card> 的 light DOM 区域
浏览器对非法使用完全静默——不报错、不警告、不渲染，只当普通文本节点处理
若用 { mode: "closed" }，JS 无法访问 shadowRoot，调试时容易误判为“没生效”

具名插槽（`slot="xxx"`）匹配失败的典型场景

匹配靠字符串精确比对，大小写、连字符、空格全部敏感，且只认直系子节点。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

外部写 <h2 slot="header">标题</h2>，但组件内写 <slot name="Header"></slot> → 不匹配，内容消失
外部写 <div slot="main-content"></div>，组件内写 <slot name="main_content"></slot> → 下划线 ≠ 连字符，不匹配
外部结构是 <my-card><section><h2 slot="header">标题</h2></section></my-card> → <h2></h2> 是孙节点，不参与分发
多个同名 <slot name="item"></slot>，只有第一个接收投射内容，其余被忽略

如何安全获取投射进来的内容节点

slot.assignedNodes() 返回空数组？大概率是时机不对，或没传 { flatten: true }。

别在 connectedCallback 里立刻查 slot.assignedNodes()——内容尚未完成分发，返回空数组是正常行为
监听 slotchange 事件才是可靠方式：slot.addEventListener('slotchange', () => { console.log(slot.assignedNodes({ flatten: true })); })
assignedNodes() 默认不展开嵌套结构，fallback 内容里的节点也拿不到，必须加 { flatten: true }
slotchange 不冒泡、不捕获，也不能绑定到 shadowRoot 上，必须单独绑定到每个 <slot></slot> 元素