Javascript HEAD中的元素在connectedCallback中立即删除（）本身，但在disconnectedCallback中访问自身是否安全

使用（非常）精简的自定义元素创建CSS网格，
我想将

document.body

用于CSS网格

• 但是（这不是问题，只是背景信息）
  ，
  和自定义元素从头部移动到主体（浏览器就是这样做的）
  因此，这些元素现在位于

  document.body.children

• 如果没有下面代码中的

  this.remove（）

  ，则
  元素会占用DOM空间
  如CSS所示：

  grid-meister{background:red}

• 使用

  this.remove（）

  将自定义元素从DOM中删除，
  但仍可在

  断开连接的回调中访问

  
  所有
  （DOM）内容仍然可用，但在DOM中不可用

身体{
显示：网格；
网格模板列：重复（数据大小，1fr）；
间距：1米；
}
网格迈斯特{
背景：红色；
}
网格单元{
宽度：100%；
背景：金；
}
定义（'grid-meister'，类扩展HtmleElement{
connectedCallback（）{
//这是.disconnectedCallback（）；
这个。删除（）；
}
断开连接的回调(
dataSize=~~ this.dataset.size，
style=this.querySelector（“style”），
单元格=数组（数据大小**2.fill（）.map（x=>document.createElement（“网格单元格”））
) {
style.innerHTML=style.innerHTML.replaceAll（“数据大小”，数据大小）；
document.body.append（…单元格）；
document.head.append（样式）；
定义（“网格单元”，类扩展HtmleElement{
connectedCallback（）{
this.innerHTML=`cell:${[…this.parentNode.children].indexOf（this）}`；
}
})}})

头中只允许少数元素。这里不应该放置任何自定义元素……我确信这就是为什么

样式

和

脚本

被移动到主体中的原因，因为浏览器通常不会使用有效代码。我猜，当在头部发现无效元素时，它要么将元素（及其内容）移动到主体，要么完全关闭头部。问题在于

disconnectedCallback

中的CE行为，而不是浏览器将（未知）元素移动到主体，这是相当常见的知识（尽管如果搜索，最终会得到许多UTF8和BOM回复）@Danny的365CSI'Engelman-是的，但是整个从头到身体的事情都是一个骗局，你可以在不改变相关内容的情况下从你的问题中省略它。是的，从文档中删除它应该是安全的，但是为什么不简单地让它

display:none

？使用

display:none

自定义元素仍然是我的孩子n

body

因此在

children

中仍然索引0。这是一种视觉解决方法，但是我不能使用

body.children

作为参考（除非我过滤掉自定义元素）也许可以，但我在“head”中有更多的自定义元素，例如：一个设置了

和花式favicon的

，然后这个自定义元素也会自动删除。