Shadow Dom 没有显示子元素？答案

【问题标题】：Shadow Dom not showing the child element?Shadow Dom 没有显示子元素？
【发布时间】：2020-07-31 16:04:27
【问题描述】：

我写了以下代码：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
  <style> p { color: green; } </style>
</head>
<body>
<p>My Future is so bright</p>
<div id='foo'></div>
<script>
  var foo = document.getElementById('foo');
  foo.shadow = document.createElement('p');
  foo.shadow.textContent = 'I am shadow';
</script>
</body>
</html>

以上代码只显示输出：

My Future is so bright  // In green

我相信预期的输出是：

My Future is so bright  // In green
I am shadow

我的理解是 I am shadow 不会显示在 green 中，因为那是 shadowDOM 的一部分，而不是实际的 DOM。另外，shadow DOM 是在JavaScript 中定义的概念还是在HTML 中定义的？

【问题讨论】：

我希望 I am shadow 不会出现在 green 中，因为这是 shadowDOM 的一部分，而不是实际的 DOM。但是，在您的输出中它显示为绿色。我对shadowDOM有一些基本的了解。你也可以提供一些解释吗？

标签： javascript html dom shadow-dom

【解决方案1】：

你需要appendChild:

  var shadow = document.createElement('p');
  shadow.innerText = "I'm shadow";
  foo.appendChild(shadow);

【讨论】：