如何解决HTML Shadow dom：为什么 attachShadow(...).insertAdjacentHTML 不工作但 attachShadow(...).innerHTML 工作？
为什么要做下面两个工作：
document.body.innerHTML = '<div>Test1</div>';
document.body.insertAdjacentHTML('beforeEnd','<div>Test2</div>');
这也有效：
document.body.attachShadow({mode: 'open'}).innerHTML = '<div>Test3</div>';
但以下不起作用：
document.body.attachShadow({mode: 'open'}).insertAdjacentHTML('beforeEnd','<div>Test4</div>');
它给出了错误 Uncaught TypeError: document.body.attachShadow(...).insertAdjacentHTML is not a function
https://jsfiddle.net/uzdy3fv9/
解决方法
当你这样做
document.body.innerHTML = '<div>Test1</div>';
document.body.insertAdjacentHTML('beforeEnd','<div>Test2</div>');
您正在调用 Element.prototype 上的方法。
阴影根不是元素 - 它们在某些方面相似，但又不相同。影子根have certain methods/properties，包括.innerHTML，但不包括.insertAdjacentHTML。
（这是有道理的…….insertAdjacentHTML('afterend' 或 'beforebegin' 甚至对于影子根意味着什么？影子根不是容器的一部分）
Shadow root API 根本不提供 insertAdjacentHTML 方法。
请注意，即使是影子根上的 innerHTML 也不是官方标准的一部分。
见
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。