用例:一个模态对话框，在调用时需要占用所有其他主体祖先 DOM 元素的 100% 硬件和功能。每个页面/网络应用程序只有其中一个，希望在 Javascript 模块到达时能够强制执行。
我可以轻松要求网络作者提供类似 <DIV></DIV> 的内容到我的网络组件，谷歌地图模式，但是将 Shadow DOM 附加到 document.body 本质上有什么不好吗？这在 Chrome 上无疑是一个无错误的选项。
一个相关的问题是我可以在渲染后替换元素的阴影 DOM 吗？我知道 Shadow DOM 1.0 只允许每个元素有 1 个 Shadow DOM，但我的用例是，在运行时，我需要试探性地组装适当的模板以满足给定的时间环境/氛围。我想到的一种方法是在加载时附加一个空的 Shadow DOM，从而防止任何 <SLOT>然后，当我知道需要什么 UI 时，用成熟的 Ridgy didge 模板内容交换/克隆/替换占位符 Shadow DOM。
所以:- 1)BODY作为HOST可以吗？ 2) 替换 Shadow DOM 的最佳实践是什么？
最佳答案
1) Is BODY as a HOST ok?
是的
2) What is best-practice for replacing Shadow DOM?
使用其中之一:
body.shadowRoot.innerHTML = [new template innerHTML]
或者:
body.shadowRoot.replaceChild( newNodes, oldNode )
或者:
body.shadowRoot.innerHTML = ''
body.shadowRoot.appendChild( newNodes )
使用template.content，您可以直接获得已经解析的DocumentFragment，因此在某些情况下可能会更快，而使用template.innerHTML，您可以从 template literals 中获利。 ，然后包含一些变量的值。
关于javascript - <body> 元素上的 Shadow DOM 是一个坏主意吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44046818/