javascript - HTML Shadow dom : why does 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

https://jsfiddle.net/uzdy3fv9/

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' 对于影子根来说意味着什么？影子根不是一个容器)