Rendering Chart JS via a Slot in Lightning Web Components - salesforce

Question

I am trying to render a Chart JS canvas via a slot;
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>
The chart does not render and the canvas in the rendered Markup shows 0 width and height. Rendering without the slot works well; I need to wrap it into a slot for structural reasons.
What could be wrong with this?

Answer 1

This was sorted out by wrapping the canvas in a div; made some logical sense to me not to push a plain 'photo' into a slot whose internals it's unaware of.
<!-- 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

Alternately, you could set a CSS property that defines the Custom Element as a block, or inline-block through the :host pseudo-class. (By default a custom element has its display value set to inline.)
Then you can set its height and width or let the default ones:
<!-- chartWrapper.html -->
<template>
<style>
:host {
display: inline-block ;
width: 50% ;
height: 200px ;
}
</style>
<slot></slot>
</template>