时间戳

首页 > 解决方案 > HTML Shadow dom：为什么 attachShadow(...).insertAdjacentHTML 不起作用但 attachShadow(...).innerHTML 起作用？

javascript - 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/

标签： javascripthtmlshadow-dom

解决方案

当你这样做

document.body.innerHTML = '<div>Test1</div>';
document.body.insertAdjacentHTML('beforeEnd', '<div>Test2</div>');

您正在调用Element.prototype.

影根不是元素——它们在某些方面是相似的，但它们并不相同。影子根具有某些方法/属性，包括.innerHTML，但不包括.insertAdjacentHTML。

（这是有道理的……影子根是什么.insertAdjacentHTML('afterend'意思'beforebegin'？影子根不是容器的一部分）

推荐阅读