slot元素必须在shadow dom模板解析时声明，运行时appendchild无效；同名slot按顺序分发且不广播；::slotted()仅支持直系子元素单层选择器；监听slotchange需确保slot已挂载并内容就绪。
slot 元素必须写在 Shadow DOM 内部，不能靠 JS 动态 append
写了 shadowRoot.appendChild(document.createElement('slot')) 却没效果？这是常见误操作。slot 是编译期语义，不是普通 DOM 节点——浏览器只在解析 Shadow DOM 模板时识别它。运行时用 appendChild() 插入的 slot 元素不会触发内容分发逻辑。
正确做法是：
- 在
constructor或connectedCallback中调用this.attachShadow({ mode: 'open' }) - 随后用
shadowRoot.innerHTML = '<slot name="header"></slot><slot>默认文案</slot>' - 或用
document.createElement('slot')+shadowRoot.append()，但必须确保是在 attachShadow 之后、且模板已挂载完成
多个同名 <slot name="item"></slot> 不会广播内容，而是顺序分发
以为写三个 <slot name="item"></slot> 就能让同一份内容出现在三处？错。每个具名 slot 只接收一个匹配节点（按 Light DOM 子节点顺序），后续同名 slot 保持为空。
例如外部写：<my-list><div slot="item">A</div>
<div slot="item">B</div>
<div slot="item">C</div></my-list>，而组件内模板是：<slot name="item"></slot><slot name="item"></slot><slot name="item"></slot>，结果是 A→第一个 slot、B→第二个、C→第三个。
若只想复用一份内容，得手动 clone 或用 CSS display: contents 配合伪元素模拟，不能依赖 slot 自身行为。
::slotted() 只支持单层选择器，深层样式需透传 class 或自定义属性
::slotted(h2) 有效，::slotted(.btn:hover) 或 ::slotted(div .text) 全部无效。浏览器强制限制它只能匹配被投射进来的**直系子元素**，不支持后代、伪类、通配符。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
想控制插槽内按钮的悬停状态？可行路径有：
- 让使用者自己加
class="btn btn-primary"，然后用::slotted(.btn-primary):hover - 在 Shadow DOM 样式中定义
:host { --btn-color: #007bff; }，再让投射内容用color: var(--btn-color) - 避免用
::slotted()处理复杂样式，改由组件内部用slot.assignedNodes({ flatten: true })遍历并添加 class
监听 slotchange 事件前，必须确认 slot 已挂载且内容已解析
在 connectedCallback 里立刻 slot.addEventListener('slotchange', ...)？可能漏掉首次分发。因为此时 Light DOM 还未完成解析，slot 尚未收到任何节点。
更稳妥的做法：
- 把监听器绑定在
shadowRoot.querySelector('slot')上，而非构造函数中提前存引用 - 首次检查用
slot.assignedNodes({ flatten: true }).length > 0，别只看assignedNodes()默认返回值（它不展开嵌套 slot） - Firefox 63 以下不支持
slotchange，需降级用MutationObserver监听 slot 的childList
最易忽略的是：slot 分发发生在 HTML 解析阶段，不是 JS 执行阶段；DOM 加载完成 ≠ slot 内容已就位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
