通过闪电网络组件中的插槽渲染图表JS

Question

我正在尝试通过插槽渲染图表JS画布;

图表包装器.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

这是通过将画布包裹在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>

Answer 2

或者，您可以设置一个CSS属性，该属性将自定义元素定义为block，或通过：host伪类inline-block。(默认情况下，自定义元素的display值设置为inline。

然后，您可以设置其height和width或让默认的

：

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