Рендеринг Chart JS через слот в веб-компонентах Lightning

Question

Я пытаюсь визуализировать холст JS Chart через слот;

chartWrapper.html

<template>
  <div class="chart-wrapper">
    <slot name="chart"></slot>
  </div>
</template>

chartWrapperContainer.html

<c-chart-wrapper>
    <canvas slot="chart" class="donut" lwc:dom="manual"></canvas>
</c-chart-wrapper>

Диаграмма нерендер и холст в визуализированной разметке показывает 0 ширину и высоту.Рендеринг без слота работает хорошо;Мне нужно завернуть его в слот по структурным причинам.

Что может быть не так с этим?

Answer 1

Кроме того, вы можете установить свойство CSS, которое определяет пользовательский элемент как block или inline-block через псевдокласс : host . (По умолчанию пользовательский элемент имеет значение display, установленное на inline.)

Затем вы можете установить height и width или оставить значения по умолчанию:

<!-- chartWrapper.html -->
<template>
   <style>
      :host {
          display: inline-block ;
          width: 50% ;
          height: 200px ;
      }
   </style>  
   <slot></slot>
</template>

Answer 2

Это было решено, оборачивая холст в div;имел некоторый логический смысл для меня, чтобы не вставлять простую «фотографию» в слот, внутренности которого он не знает.

<!-- chartWrapper.html -->
<template>
  <div class="chart-wrapper">
    <slot name="chart"></slot>
  </div>
</template>

<!-- chartWrapperContainer.html -->
<c-chart-wrapper>
  <div slot="chart">
    <canvas class="donut" lwc:dom="manual"></canvas>
  </div>
</c-chart-wrapper>