HTML ：内容模板元素
💡
原文中文，约6600字，阅读约需16分钟。
📝
内容提要
HTML <template> 元素用于存储可通过 JavaScript 调用的 HTML 片段，支持 shadow DOM，具有影响内部 shadow root 可见性的 open 和 closed 属性。该元素不允许包含内容，解析时会忽略 <html>、<head> 和 <body> 标签，使用时需谨慎以避免 DocumentFragment 陷阱。
🎯
关键要点
- <template> 元素用于存储可通过 JavaScript 调用的 HTML 片段，支持 shadow DOM。
- <template> 元素具有 open 和 closed 属性，影响内部 shadow root 的可见性。
- <template> 元素不允许包含内容，解析时会忽略 <html>、<head> 和 <body> 标签。
- 使用 <template> 元素时需谨慎，以避免 DocumentFragment 陷阱。
- 该元素的 content 属性为只读，持有包含模板所表示的 DOM 子树的 DocumentFragment。
- 声明式 Shadow DOM 通过 shadowrootmode 属性生成 Shadow DOM。
- shadowrootdelegatesfocus 属性可将焦点委托给树中首个可聚焦元素。
- 规避 DocumentFragment 陷阱时，应将事件处理程序附加到 DocumentFragment 的子节点上。
- 浏览器兼容性需考虑，部分旧版属性已被移除或替代。
➡️
