Как создать собственный HTML-элемент с помощью Ace Editor? ⇐ Html

[Anonymous]

Я пытаюсь создать собственный HTML-элемент с помощью веб-компонентов, который будет содержать экземпляр Ace Editor. Моя попытка решения следующая

Код: Выделить всё

 customElements.define("test-editor", class  extends HTMLElement {
constructor() {
super();

const editorContainer = document.createElement("div");
editorContainer.setAttribute("id", "editor_container");

const root = this.attachShadow({mode: "open"});
root.appendChild(editorContainer);
}

connectedCallback() {
ace.edit("editor_container");
}
});

Затем я пытаюсь использовать этот пользовательский элемент в следующем HTML (custom_element.js содержит указанное выше)

Код: Выделить всё

 




html, body, #editor_container {
width: 100%;
height: 100%;
}

Когда я загружаю эту страницу в Chrome или Firefox, я получаю следующую ошибку в консоли

Неперехваченная ошибка: ace.edit не может найти div #editor_container

в Object.t.edit (ace.js:1)

в HTMLElement.connectedCallback (custom_element.js:17)

на custom_element.js:3


Можно ли как-нибудь встроить экземпляр Ace Editor в пользовательский элемент?

Подробнее здесь: https://stackoverflow.com/questions/633 ... ace-editor