通过 Lightning Web 组件中的插槽呈现图表 JS

Question

我正在尝试通过插槽呈现图表 JS canvas；

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>

图表未呈现，呈现标记中的 canvas 显示 0 宽度和高度。没有插槽的渲染效果很好；由于结构原因，我需要将它包装到插槽中。

这有什么问题吗？

Answer 1

这是通过将 canvas 包装在 div 中解决的；对我来说，不要将一个普通的 'photo' 推入一个它不知道其内部结构的插槽中，这在逻辑上是合理的。

<!-- 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>

Answer 2

或者，您可以通过 :host pseudo-class。（默认情况下，自定义元素的 display 值设置为 inline。）

然后你可以设置它的height和width或者让默认的：

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

通过 Lightning Web 组件中的插槽呈现图表 JS

Rendering Chart JS via a Slot in Lightning Web Components

salesforce

shadow-dom

custom-element

salesforce-lightning