HTML全局属性slot在Web Components影子DOM中的插槽内容分发-html教程-PHP中文网

slot属性仅在shadow dom中生效，必须作用于自定义元素的直系子元素且大小写严格匹配，否则内容静默丢弃；需用slotchange事件监听和assignednodes({flatten:true})验证分发结果。

html全局属性slot在web components影子dom中的插槽内容分发

slot 属性不是通用 HTML 全局属性，它只在 Web Components 的 Shadow DOM 环境中起作用——写错位置、大小写或层级，内容就静默消失，不报错也不渲染。

为什么 `slot` 属性写了却没效果？

最常见原因是它被用在了错误上下文中：

slot 属性必须出现在自定义元素的**直系子元素**上，比如 <my-card><h2 slot="title">标题</h2></my-card> ✅；但 <my-card><div><h2 slot="title">标题</h2></div></my-card> ❌（<h2></h2> 是孙节点，直接丢弃）
换行和空格会生成文本节点：<my-card>\n <h2 slot="title">标题</h2>\n</my-card> 中第一个子节点是换行符，<h2></h2> 变成第二个子节点，可能错位
slot 属性值必须是静态字符串，不能是 JS 表达式：<button :slot="currentSlot"></button> 或 <button slot="{name}"></button> 都无效，浏览器当普通属性忽略

`slot` 属性和 `<slot></slot>` 标签怎么配对？

匹配靠的是精确字符串比对，不是模糊查找：

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

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

下载

<slot name="header"></slot> 只接收 <h1 slot="header"></h1>，slot="Header"、slot="header "（尾部空格）、slot="header-text" 全部失败
没写 slot 属性的元素（如 <p>正文</p>）只尝试塞进第一个无 name 的 <slot></slot>；后续所有无 name 的 <slot></slot> 都为空
多个同名 <slot name="item"></slot> 时，每个接收一个对应 slot="item" 的节点，按顺序分发，不是复制也不是合并

怎么确认内容真的投递进去了？

别依赖 querySelector 查投递后的内容——它还在 Light DOM 里。要用 slot 实例的方法：

slot.assignedNodes({ flatten: true }) 才能拿到所有最终显示的节点（含 fallback 内容）
slotchange 事件必须绑定到具体 <slot></slot> 元素上，不能监听 shadowRoot：slot.addEventListener('slotchange', () => {...})
在 connectedCallback 里立刻调 assignedNodes() 得到空数组是正常的——分发还没完成，得等 slotchange 触发后再查