自定义 HTML 元素不呈现子元素答案

【问题标题】：Custom HTML elements not rendering children自定义 HTML 元素不呈现子元素
【发布时间】：2021-12-09 12:23:03
【问题描述】：

以下代码不呈现 CategoryElement 的子元素 - 仅呈现 Shadow Root 中的

元素。如何使 CategoryElement 的子级呈现？

<html>
    <head>
    </head>
    <body>
        <script>
            class CategoryElement extends HTMLElement {
                constructor() {
                    super();
                    this.attachShadow({mode: 'open'});
                    this.header = document.createElement('p');
                    this.header.innerText = 'Shadow Header';
                    this.shadowRoot.append(this.header);
                }
            }
            customElements.define('category-element', CategoryElement);

            var elem = document.createElement('category-element');
            document.body.appendChild(elem);

            var outer = document.createElement('p');
            outer.innerText = 'Outer Header';
            elem.appendChild(outer);
        </script>
    </body>
<html>

【问题讨论】：

标签： javascript html custom-element

【解决方案1】：

我相信这会让你到达那里，但无论如何我都不是影子专家。

我添加了.shadowRoot，如下所示：

elem.shadowRoot.appendChild(outer);

当我使用开发工具进行检查时，我可以看到 <p> 都在 shadow-root 元素的一侧（如果这是引用它的正确方法的话）。

</head>

<body>
  <script>
    class CategoryElement extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({
          mode: 'open'
        });
        this.header = document.createElement('p');
        this.header.innerText = 'Shadow Header';
        this.shadowRoot.append(this.header);
      }
    }
    customElements.define('category-element', CategoryElement);

    var elem = document.createElement('category-element');
    document.body.appendChild(elem);

    var outer = document.createElement('p');
    outer.innerText = 'Outer Header';
    elem.shadowRoot.appendChild(outer);
  </script>
</body>
<html>

【讨论】：

谢谢，但这不是我想要的。我想要子元素，而不是影子 dom，因为它们更烦人的操作和样式。
如果你不想要shadowDOM，那就不要附上：this.attachShadow({mode: 'open'});
或learn to use <slot> element(s)在shadowDOM中显示lightDOM内容<slot>