Unable to find the id of an HTML element created by pywidget with Javascript in Jupyter Notebook (Voila)

Question

I am working on an interactive web application with Jupyter Notebook and Voila.

and have following code

import ipywidgets as widgets

element = """<textarea id="editor" name="editor">
    </textarea>"""

textarea = widgets.HTML(
    value=element,
    placeholder='Some HTML',
    description='Some HTML',
)
display(textarea)

Now I need to access the widget with javascript in order to manipulate the textarea and get the input and to process it with python. My goal is it to modify the textarea through javascript to build a custom code editor with CodeMirror. I tried several solutions but all potential solutions are unable to find the element through the id.

For example I tried via jupyter notebook

%%js
window.onload = init;
  function init(){
    var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {   
  }

or through markdown with

<script>
window.onload = init;
  function init(){
    var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {   
  }
</script>

and even via HTML-Widgets in Python

ok i tried this and that

import ipywidgets as widgets

js = """<script>
window.onload = init;
  function init(){
    var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {   
  }
</script>"""

script = widgets.HTML(
    value=js,
    placeholder='Some HTML',
    description='Some HTML',
)
display(script)

And as well with

from IPython.display import Javascript
Javascript("...")

I am just unable to find the ID. Maybe someone can help me?