Как создать собственный элемент без AttachShadow? ⇐ Html

[Anonymous]

Предположим, у меня есть такой код:

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

class MyElem extends HTMLElement {
constructor() {
super();

let templateContent = document.getElementById('template-elem').content;
this.innerHTML = templateContent.cloneNode(true);
}
}

window.customElements.define('my-elem', MyElem);

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

b
c

Почему это не работает? В инспекторе Chrome пользовательский элемент не содержит HTML. Я также пробовал:

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

this.append(templateContent.cloneNode(true));

но это также привело к появлению пустого дерева HTML.
Во всех руководствах упоминается использование теневого DOM, например:

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

this.attachShadow({mode: 'open'}).appendChild(templateContent.cloneNode(true));

и хотя это работает, вам приходится использовать Shadow DOM для вашего пользовательского элемента. Нет ли способа просто добавить HTML-код шаблона к вашему пользовательскому элементу без необходимости использования Shadow DOM? В моем небольшом варианте использования я бы предпочел просто использовать глобальные стили CSS.

Подробнее здесь: https://stackoverflow.com/questions/650 ... tachshadow