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>本身并非由模板在lightdom部件实际上渲染的元素，它们只作为位置标记为其中模板放在孩子。

此外，根据这个问题，不支持条件渲染槽：https :
//github.com/ionic-team/stencil/issues/399

我们<slot>在 Stencil lightdom 组件中使用，并且基本上已经回退到为此目的display: none在 周围切换包装器<slot>。这并不理想，但它有效。