Custom HTML elements不渲染子元素 仅Shadow Root内p元素显示如何解决

问题原因 #

开启Shadow DOM之后，自定义元素的渲染完全由Shadow Root内部的节点决定，直接挂载到自定义元素本身的子元素不会被默认渲染，必须通过插槽机制指定这些外部子元素的渲染位置。

解决方法 #

在Shadow Root中添加<slot>元素作为外部子元素的占位容器即可，修改后的代码如下：

<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);
                    // 添加slot占位符，用于承载外部插入的子元素
                    const slot = document.createElement('slot');
                    this.shadowRoot.append(slot);
                }
            }
            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>

补充说明 #

• 单个默认slot会承载所有未指定slot属性的外部子元素
• 如果需要将不同的外部子元素放到Shadow Root的不同位置，可以使用具名插槽：
  自定义元素内部定义具名插槽示例：

  const titleSlot = document.createElement('slot');
  titleSlot.name = 'title';
  this.shadowRoot.append(titleSlot);
  

  外部使用时给子元素加slot属性即可匹配对应插槽：

  outer.slot = 'title';
  

内容的提问来源于stack exchange，提问作者Alex Williams