Stencil.js отображает содержимое слота, событие, если render () возвращает ноль - PullRequest
Новая
       41

Stencil.js отображает содержимое слота, событие, если render () возвращает ноль

0 голосов
/ 06 июня 2019

У меня есть компоненты 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 в Component decorator. Но когда теневой DOM отключен, компонент показывает содержимое слота независимо от значения this.active.

У меня такое ощущение, что я не понимаю, как рендер работает со слотами. Не могли бы вы объяснить это мне? Буду очень признателен, если вы знаете, как обойти эту проблему, не скрывая содержимое слота программно.

1 Ответ

1 голос
/ 08 июня 2019

См. Документацию:
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

Элементы SLOT могут использоваться только в shadowDOM, при использовании в lightDOM (или любом DOM) они являются неизвестными тегами, поэтому отображают содержимое

...