Shadow Dom没有显示子元素？

Question

我编写了以下代码：

<!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。另外，影子DOM是JavaScript中定义的概念还是HTML中定义的概念？

Answer 1

您需要appendChild：

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

Answer 2

一旦选择了要用于承载（const foo = document.getElementById('foo');）Shadow DOM的元素，然后必须将Shadow DOM附加到它。

您可以使用attachShadow()，

foo.attachShadow({mode:'open'});

这里我们将影子根附加到元素foo，因此影子根从这里开始，

这是代表新创建的Shadow DOM的根节点的对象，它将在其中附加其他元素。

下面是对由foo托管的Shadow Root添加段落元素的示例。

foo.shadowRoot.appendChild(shadow);

以及以下代码段，

const foo = document.getElementById('foo');

const shadow = document.createElement('p');
shadow.textContent = 'I am shadow';

foo.attachShadow({mode:'open'});
foo.shadowRoot.appendChild(shadow);

p { color: green; }

<p>My Future is so bright</p>
<div id='foo'></div>

参考链接：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Shadow Dom没有显示子元素？

问题描述投票：0回答：1

1个回答

最新问题

Shadow Dom没有显示子元素？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1