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时，它实际上可以按预期工作。但是，当禁用影子DOM时，无论this.active的值如何，组件都会显示插槽的内容。

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

Answer 1

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

有几点警告； <slot>元素本身实际上并不是由Stencil在灯光组件中渲染的，它们仅用作Stencil放置子项的位置标记。

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

我们在模板光度组件中使用<slot>，并且为此目的基本上已经放弃了在display: none周围的包装器上切换<slot>。这并不理想，但是可以。

Answer 2

请参阅文档：
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

SLOT元素只能在shadowDOM中使用，当在lightDOM（或任何DOM）中使用时，它们是未知标签，因此会显示内容

Stencil.js呈现广告位内容，如果render（）返回null

2 个答案: