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?
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?
Share Improve this question edited Mar 23, 2015 at 18:33 Balio asked Mar 23, 2015 at 17:46 BalioBalio 1311 gold badge1 silver badge5 bronze badges 2- 1 How is that even Shadow DOM …? – C3roe Commented Mar 23, 2015 at 18:03
- Downvoted because it's not shadow DOM – onin Commented Sep 19, 2015 at 17:48
3 Answers
Reset to default 7This 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.
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");
It works after copied your html and js code. please check at fiddle
Make sure including jquery.min.js
<textarea name="remark" rows="4" cols="30"> #shadow-root (user-agent) <div id="inner-editor"> "this is text in textarea" </div> </textarea>
alert($("[name='remark']").text());
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
alert($("[name='remark']").text());
});
//]]>
</script>
</head>
<body>
<textarea name="remark" rows="4" cols="30"> #shadow-root (user-agent) <div id="inner-editor"> "this is text in textarea" </div> </textarea>
</body>
</html>