Getting items from the Shadow DOM

Question

In the project I'm working on, I have an HTML document that is created through an application and then passed to a function that converts HTML to PDF.

Inside HTML, I have text fields for displaying editable information. When the user edits the information that is currently in the text box, I want to save this information so that when it is transferred to the PDF generator it is the latest version of the DOM.

After some testing, I found that the edited version of the textarea content is in the Shadow DOM.

Is there any way to get this content and put it in the actual DOM?

I am not doing anything that explicitly places the content there, but using Firebug and WebInspector, I can see it as Shadow content.

Answer 1

You can get the current value with <textarea> valueand put it in the DOM through the .textContentproperty:

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>

Run codeHide result

... if the function you are calling really reads its input from the DOM page. What is this library?