HTML Shadow dom：为什么 attachShadow(...).insertAdjacentHTML 不起作用但 attachShadow(...).innerHTML 起作用？

Question

为什么下面两个起作用：

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

Answer 1

当你这样做时

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

您正在调用 Element.prototype 上的方法。

影根不是元素——它们在某些方面相似，但又不相同。阴影根 have certain methods/properties，包括 .innerHTML，但不包括 .insertAdjacentHTML。

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

Answer 2

影子根 API 根本不提供 insertAdjacentHTML 方法。

请注意，即使 innerHTML 影子根也不是官方标准的一部分。

见

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot

HTML Shadow dom: why does attachShadow(...).insertAdjacentHTML not work but attachShadow(...).innerHTML work?