JQuery select element in shadow DOM

Question

HTML code:

<textarea name="remark" rows="4" cols="30">
  #shadow-root (user-agent)
  <div id="inner-editor">
    "this is text in textarea"
  </div>
</textarea>

I am trying select element DIV with id="inner-editor" with this JQuery:

var el = $("[name='remark']").children();

but the var el is empty. If I try this:

$("[name='remark']").text();

It is also empty output.

#shadow-root (user-agent) is something like template (I dont know exactle what it is) and isn't display in textarea

Is it possible select this element DIV in textarea element?

Answer 1

I dont really get your example, but i guess you are hiding <div id="inner-editor">in the Shadow Root of the <textarea name="remark" rows="4" cols="30">.

You need to select the <textarea name="remark" rows="4" cols="30"> and there you can access the Shadow Root of the element via the shadowRoot javascript property.

Full example:

var el = $("[name='remark']").shadowRoot.getElementById("inner-editor");

Edit: With Jquery, according to your question, you need to pass the shadowRoot to Jquery. It should work with Jquery as well:

var sr = $("[name='remark']").shadowRoot;
var el = $(sr).find("#inner-editor");

Answer 2

This worked for me to select an element within Shadow root. I have converted it to your scenario.

let textArea = $("textarea[name='remark']"); 
let sr = $(textArea)[0].shadowRoot; 
console.log($(sr).find('.#inner-editor'));

Hope this may help somebody.