Javascript HTML阴影dom：为什么attachShadow（…）.insertAdjacentHTML不工作，但是attachShadow（…）.innerHTML工作？

为什么以下两种方法有效：

document.body.innerHTML = '<div>Test1</div>';

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

document.body.innerHTML='Test1'；
document.body.insertAdjacentHTML（'beforeEnd'，'Test2'）；

这也适用于：

document.body.attachShadow({mode: 'open'}).innerHTML = '<div>Test3</div>';

document.body.attachShadow（{mode:'open'}）.innerHTML='Test3'；

但以下方法不起作用：

document.body.attachShadow({mode: 'open'}).insertAdjacentHTML('beforeEnd', '<div>Test4</div>');

document.body.attachShadow（{mode:'open'}）.insertAdjacentHTML（'beforeEnd'，'Test4'）；

它给出错误

uncaughttypeerror:document.body.attachShadow（…）。insertAdjacentHTML不是函数

当你这样做的时候

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

document.body.innerHTML='Test1'；
document.body.insertAdjacentHTML（'beforeEnd'，'Test2'）；

您正在调用

元素.prototype

上的方法

阴影根不是元素-它们在某些方面相似，但它们不相同。阴影根，包括

.innerHTML

，但不包括

.insertAdjacentHTML

（这是有意义的…如果使用影子根，那么

.insertAdjacentHTML（'afterend'

或

'beforebeagin'

意味着什么？影子根不是容器的一部分）

当您这样做时

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

document.body.innerHTML='Test1'；
document.body.insertAdjacentHTML（'beforeEnd'，'Test2'）；

您正在调用

元素.prototype

上的方法

阴影根不是元素-它们在某些方面相似，但不相同。阴影根包括

.innerHTML

，但不包括

.insertAdjacentHTML

---

（这是有意义的…什么是

.insertAdjacentHTML（'afterend'

或

'beforebeagin'

甚至对影子根表示？影子根不是容器的一部分）

影子根API根本不提供

insertAdjacentHTML

方法

请注意，即使阴影根上的

innerHTML

，也不是官方标准的一部分

看

---

影子根API根本不提供

insertAdjacentHTML

方法

请注意，即使阴影根上的

innerHTML

，也不是官方标准的一部分

看

---

ShadowRoot

对象没有

insertAdjacentHTML

方法。

ShadowRoot

对象没有

insertAdjacentHTML

方法。末尾的

afterend

和

beforebeagin

部分是有意义的。但是，那么，如何利用

insertAdjacentHTML的好处呢de>例如在阴影dom中某个元素之后的特定位置插入？您可以选择阴影根的子元素之一，然后在该元素上调用
insertAdjacentHTML
，而不是在阴影根上。您正在调用
元素上的方法。prototype
innerHTML

，同时肯定实现了在内部使用setter函数，从技术上讲，它仍然是一个属性而不是一个方法。据我所知，

insertAdjacentHTML

确实适用于阴影dom中的元素，但不适用于根本身？这让我回到

什么是afterend和beforebeagin

甚至意味着part。在对

document.body

。他们只是把它放在

之外。对shadow dom也可以这样做吗？@PranoyC区别在于

document.body

有一个容器，即HTML文档本身。相比之下，shadow root没有容器，因此创建“相邻”元素在它的容器外对它来说没有意义。同样的原因，阴影根没有

outerHTML

。末尾的

afterend

和

beforebeagin

部分是有意义的。但是，如何利用

insertAdjacentHTML

的好处，比如在特定位置插入一段特定的代码影子dom中的元素？您可以选择影子根的子元素之一，然后在该元素上调用

insertAdjacentHTML

，而不是在影子根上。您正在调用

元素上的方法。prototype

innerHTML，当然在内部是通过setter函数实现的，但从技术上讲，它仍然是一个属性而不是一个方法。据我所知，

insertAdjacentHTML

确实适用于影子dom内部的元素，但不适用于根本身？这让我回到

后面和开始之前的部分含义。它们在对
document.body
执行时确实有效。它们只是将它放在他
。难道对shadow dom也不能这样做吗？@PranoyC区别在于
document.body
有一个容器，即HTML文档本身。相比之下，shadow root没有容器，因此创建元素“相邻”由于同样的原因，影子根没有
outerHTML
。既然
innerHTML
和
insertAdjacentHTML
不是官方标准的一部分，插入元素的唯一方法是使用老式的
appendChild
方法，其中包括额外的序列化步骤吗ion？有
ShadowRoot包含InnerHTML；
，对吗？@CertainPerformance W3C编辑草稿2020年4月20日草稿不是官方标准的一部分（目前）。老式的appendChild方法，它涉及到一个完全不是老式的序列化步骤。实际上，出于一系列原因，它是创建元素的首选方法，防止跨站点脚本的安全性只是一个方面。如果您坚持使用不安全的属性和方法，如您的问题所提出的两个，则与之相反ider使用受信任的类型以及配置为启用受信任类型的内容安全策略。该规范可能不稳定，但它仍然是事实上的“官方现行标准”。W3C喜欢将内容一成不变地写在