Почему размещение пользовательского HTML-элемента внутри другого оставляет второй скрытым? ⇐ CSS

[Anonymous]

TL;DR: когда один пользовательский элемент находится внутри другого, второй не отображается. Почему это и как это исправить?
Объяснение
Я создал три пользовательских HTML-элемента и два шаблона с помощью JS (см. ниже).

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

const baseTemplate = document.createElement("template");
baseTemplate.innerHTML = `
Warning: left-pane not included
Warning: right-pane not included
`;

const paneTemplate = document.createElement("template");
paneTemplate.innerHTML = `Warning: no content included`;

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

const shadow = this.attachShadow({ mode: "closed" });

let clone = baseTemplate.content.cloneNode(true);
shadow.append(clone);
}
}

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

const shadow = this.attachShadow({ mode: "closed" });

let clone = paneTemplate.cloneNode(true);
shadow.append(clone);
}
}

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

const shadow = this.attachShadow({ mode: "closed" });

let clone = paneTemplate.cloneNode(true);
shadow.append(clone);
}
}

customElements.define("page-base", PageBase);
customElements.define("left-pane", LeftPane);
customElements.define("right-pane", RightPane);

В документе HTML (см. ниже), когда правая панель или левая панель помещается внутри другого настраиваемого элемента (в данном случае page-base< /code>), он не отображается в браузере.

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

[...]
   




Thing 1


Thing 3

Thing 2

Вопрос: Вещь 1 и Вещь 2 обрабатываются, но не Вещь 3. Почему это и как это исправить?
Я пробовал использовать каждый пользовательский элемент отдельно, и они отлично работают, помещая внутрь теги заголовка или абзаца, но не для пользовательских элементов. .

Подробнее здесь: https://stackoverflow.com/questions/793 ... ond-hidden