Stencil组件仅渲染插槽元素，其余元素不显示如何解决？

核心原因 #

当设置shadow: false时，Stencil不会创建Shadow DOM，组件的模板内容和插槽内容会直接渲染到组件的宿主元素内部。如果模板结构与插槽的结合方式不正确，会导致组件自身的结构元素被插槽内容覆盖或未正确合并。

正确的组件实现方式 #

确保组件的模板结构完整包裹插槽位置，同时正确使用命名插槽：

import { Component, h } from '@stencil/core';

@Component({
  tag: 'base-offcanvas',
  shadow: false,
})
export class BaseOffcanvas {
  render() {
    return (
      <section class="offcanvas">
        <button class="offcanvas-close">×</button>
        <div class="offcanvas-header">
          <slot name="heading"></slot>
        </div>
        <div class="offcanvas-content">
          <slot name="content"></slot>
        </div>
      </section>
    );
  }
}

组件的正确使用方式 #

在父组件或页面中使用时，将插槽内容放在<base-offcanvas>标签内部，并通过slot属性指定对应插槽：

<base-offcanvas>
  <h2 slot="heading">弹窗标题</h2>
  <p slot="content">弹窗内容区域，这里可以放任意内容</p>
</base-offcanvas>

关键注意事项 #

• 必须在组件模板中明确写出<slot>标签，并通过name属性对应命名插槽，不能省略组件自身的结构元素直接返回插槽。
• 关闭Shadow DOM后，组件的样式会直接作用于全局，注意通过类名隔离样式，避免样式污染。
• 确保组件模板的结构是一个完整的根元素（比如示例中的<section>），不要返回多个同级根元素，否则可能导致渲染异常。

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