Трафарет JS Визуализация вложенных компонентов - PullRequest
Новая
       108

Трафарет JS Визуализация вложенных компонентов

1 голос
/ 30 апреля 2020

Я создал два веб-компонента, которые вложены друг в друга. Основная проблема, с которой я сталкиваюсь, заключается в том, что, когда я пытаюсь визуализировать дочерний компонент, все из родительского компонента перекрывается. Я думаю, что проблема в том, что и родительский компонент, и дочерний компонент рендерит <slot/>. Как видите, родительский компонент рендерит <slot></slot>. И дочерний компонент также отображает каждый из своих слотов по имени, единственное найденное мною «решение» - установить shadow в true (shadow:true) в дочернем элементе, таким образом отображается только дочерний элемент <slot/> и это не перекрывается родителем. Но это не работает для меня, потому что внутри моего дочернего компонента я хотел бы отобразить другой компонент, но, поскольку это теневой DOM, он ничего не показывает. Есть идеи? Спасибо. 

<parent-component>
  <child-component>
    <div slot='title'>title</div>
    <div slot='subtitle'>subtitle</div>
  </child-component>
</parent-component>

@Component({
  tag: 'child-component'
  shadow: false
})
export class ChildComponent{

  //my-logic

  render(){
    return(
      <div>
        <slot name='title'/>
        <slot name='subtitle'/>
        <external-component></external-component>
      </div>
    )}
  }
}

@Component({
  tag: 'parent-component'
  shadow: false
})
export class ParentComponent{

  //my-logic

  render(){
    return(
      <div>
        <slot></slot>
      </div>
    )}
  }
}
...