Skip to content

Shadow DOM、模板与 slot:练习答案 ​

答案必须保留本节输入、操作和可观察结果。先运行成功路径,再运行一个反例;

text
输入:第一次执行 → 改变一个条件 → 取消或卸载
预期:状态转移与正文规则一致;取消后没有迟到写入;失败保留可诊断原因

若结果不同,优先检查资源所有权、执行时机和宿主前提,而不是只改最终 UI。

open/closed ShadowRoot ​

open 模式可从 host.shadowRoot 访问,closed 模式不暴露引用;两者都仍会隔离样式和查询范围。

template 克隆与渲染 ​

template.content.cloneNode(true) 生成独立节点;同一模板克隆两次,修改一份不应影响另一份。

slot、fallback 与分配 ​

slotchange 在分配列表变化时触发;assignedNodes({flatten:true}) 才能看到嵌套 slot 的最终节点,空 slot 才显示 fallback。

章节入口核对 ​

以下入口对应本章概览或综合练习,答案核对沿用本章各知识点的实现与日志。

用心记录每一步成长