从 Shadow DOM 获取元素

Question

在我正在处理的一个项目中，我有一个通过应用程序生成的 HTML 文档，然后传递给将 HTML 转换为 PDF 的函数。

在 HTML 中，我有 textareas 来显示可编辑的信息。当用户编辑当前在 textarea 中的信息时，我想保存该信息，以便在将其传递给 PDF 生成器时，它是 DOM 的最新版本。

经过一些测试，我发现 textarea 内容的编辑版本在 Shadow DOM 中。

有没有办法获取该内容并将其放入实际的 DOM 中？

我没有做任何明确将内容放在那里的事情，但使用 Firebug 和 WebInspector 我可以将其视为影子内容。

Answer 1

您可以通过<textarea> 的value 属性获取当前值，并通过其.textContent 属性将其放入DOM：

function f() {
  var t = document.getElementById('t');
  t.textContent = t.value;
  alert("The resulting DOM is: " + t.parentNode.innerHTML);
}

<div>
  <textarea id = "t">test</textarea>
</div>
<button onclick="f()">click</button>

...假设您调用的函数确实从页面的 DOM 中读取了它的输入。这是什么图书馆？