HTML中Template标签与Shadow DOM的协同使用指南
热心网友
99
转载
详解HTML中Template标签与Shadow DOM的协同工作流
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
为什么不能直接把 内容写进 shadowRoot.innerHTML
直接把模板内容塞进 shadowRoot.innerHTML，这可能是开发者最容易踩的第一个坑。原因很简单：innerHTML 只认字符串，它会把你给的东西当成原始的 HTML 标记重新解析一遍。而 标签的 .content 属性，本质上是一个已经解析好的 DocumentFragment 节点树。
这其中的差别，就好比是把一份已经组装好的乐高模型（DocumentFragment）拆成零件说明书（字符串），再让工人照着说明书重新拼一次。在这个过程中，一些关键信息必然会丢失：