ionic-framework - Stencil.js 呈现插槽内容，如果 render() 返回 null 则事件

Question

我有一个 Stencil.JS 组件:

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

@Component({
   tag: 'my-comp',
   styleUrl: 'my-comp.css',
   // shadow: true
})

export class MyComp {
   @Prop() active: boolean = false;
   render() {
      return this.active ? <div>
         <slot></slot>
      </div> : null;
   }
}

当我以这种方式使用组件时，我希望插槽的内容不会呈现:

<my-comp>
   <p>I'm hidden!</p>
</my-comp>

而且，实际上它按预期工作，当“阴影”在组件装饰器中设置为 true 时。
但是，当禁用 shadow DOM 时，无论 this.active 的值如何，组件都会显示 slot 的内容。

我有一种感觉，我不明白渲染是如何与插槽一起工作的。你能给我解释一下吗？如果您知道如何在不以编程方式隐藏插槽内容的情况下解决此问题，我将不胜感激。

Answer 1

接受的答案是不正确的。 Stencil绝对支持<slot> ，即使在非 shadow成分。这就是 Stencil 中内容投影的工作原理。
有一些警告； <slot>元素本身实际上并不是由 Stencil 在 lightdom 组件中渲染的，它们仅用作 Stencil 放置子元素的位置标记。
此外，根据这个问题，不支持条件渲染槽:
https://github.com/ionic-team/stencil/issues/399
我们使用 <slot>在 Stencil lightdom 组件中，并且基本上已经退回到切换 display: none在 <slot> 周围的 wrapper 上以此目的。这并不理想，但它有效。