时间戳

首页 > 解决方案 > Stencil.js 渲染插槽内容，如果 render() 返回 null 则事件

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

问题描述

我有一个 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>

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

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

标签： ionic-frameworkweb-componentstenciljs

解决方案

接受的答案不正确。Stencil 绝对支持<slot>，即使在非shadow组件中也是如此。这就是 Stencil 中内容投影的工作原理。

有一些注意事项；<slot>元素本身实际上并不是由 Stencil 在 lightdom 组件中渲染的，它们仅用作 Stencil 放置子元素的位置标记。

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

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

推荐阅读