How to visualize a vaadin web component

Question

1. Follow the vaadin guidence of web component to create a meter:

   @Tag("dw-meter")
   @NpmPackage(value = "echarts", version = "5.2.2")
   @JsModule("../node_modules/echarts/dist/echarts.js")
   @JsModule("./dwmeter.webcomponent.js")
   public class DwMeter extends Div {
   
   }
   

2. Integrate the meter into a demo application:

   DwMeter meter = new DwMeter();
   meter.setWidth("100px");
   meter.setHeight("100px");
   add(meter);
   

3. Application is executed successfully, but the meter is not displayed.

4. Trace the web page, Tag <dw-meter> and <canvas> are generated correctly :

5. Changed Tag <dw-meter> to <div>, the meter is visible:

My question is how to visualize an user-defined vaadin web component? e.g. <dw-meter>

attached dwmeter.webcomponent.js:

import * as ECharts from "echarts";

class dwMeter extends HTMLElement {
    constructor() {
        super();
    }

    init(o) {
        // Shadow root
        const shadowRoot = this.attachShadow({mode: 'open'});

        // container
        var container = document.createElement('div');
        shadowRoot.appendChild(container);

        // Garantee all elements are rendered
        setTimeout(function() {

            var myChart = ECharts.init(o);  //container

            myChart.setOption(o.options());

        }, 0);

    }

    options() {
        const gaugeData = [
                {
                  value: 0.25,
                  name: 'pressure',
            title: {
              offsetCenter: ['0%', '90%']
            }
                }
              ];

        var option = {
          series: [
            {
              type: 'gauge',
              min: 0,
              max: 0.25,
              splitNumber: 5,

              progress: {
                show: false,
                width: 5
              },
              axisLine: {
                lineStyle: {
                  width: 5,
                  color: [[1, 'rgba(36,177, 76)']]
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                length: -10,
                lineStyle: {
                  width: 5,
                  color: 'rgba(36,177, 76)'
                }
              },
              axisLabel: {
                distance: -20,
                color: '#999',
                fontSize: 10
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 12,
                itemStyle: {
                  borderWidth:0,
                  color: 'rgba(36,177, 76)',
                }
              },
              pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 5,
                length: '60%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                  color: 'rgba(36,177, 76)'
                }
              },


                title: {
                color: 'rgba(36,177, 76)',
                fontSize: 14,
                fontWeight: 800,
                fontFamily: 'Arial',
                offsetCenter: [0, '100%']
              },

              detail: {
                valueAnimation: true,
                fontSize: 12,
                offsetCenter: [0, '55%'],
                show: true

              },
              data:gaugeData
            }
          ]
        };

        return option;
    }

    connectedCallback() {
        this.init(this);
    }

    disconnectedCallback() {
    }

    attributeChangedCallback() {
    }

    clone(origin, target) {
        var target = target || {};
        for(var prop in origin) {
            target[prop] = origin[prop];
        }
    }

}

window.customElements.define('dw-meter', dwMeter);
 

Answer 1

The reason that nothing is shown when you're using the <dw-meter> custom element is that it has a shadow root, while the actual content (rendered by the ECharts library) is outside that shadow root. Whenever an element has a shadow root, then the content of the shadow root will be rendered and the content outside the shadow root will be rendered in the location of a <slot> element inside the shadow root. If there is no <slot>, then it won't be shown anywhere at all.

If you want to use the shadow root to encapsulate styles, then you would at the very least need to change ECharts.init(o) to instead do ECharts.init(container). There might also be other things that you need to change to make it work properly, but that depends on exactly how ECharts is implemented. The o parameter that I assume you're passing from the server is most likely redundant since this is already a reference to the top-level element.