Пользовательский тег шаблона элемента не отображает элемент тега canvas

Question

Шаблон HTML-тега не отображает элемент тега canvas

class BarChart extends HTMLElement {

    connectedCallback() {
        let templateEl = document.getElementById("id_bar-chart_template");
        this.append(templateEl.content.cloneNode(true));
        let ctx = document.querySelector("#id_bar-chart");  // this works
        // let ctx = this.querySelector("#id_bar-chart_inside_template");
        // this does not work
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
                datasets: [
                    {
                        label: "Population (millions)",
                        backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                        data: [2478, 5267, 734, 784, 433]
                    }
                ]
            },
            options: {
                legend: {display: false},
                title: {
                    display: true,
                    text: 'Predicted world population (millions) in 2050'
                }
            }
        });
    }

}


customElements.define("bar-chart", BarChart);

Блок HTML, использующий пользовательский элемент:

<div class="container">
    <div class="row">
        <div class="col-12">
            <h1>Products and brands of vendors</h1>
                <canvas id="id_bar-chart"></canvas>
            <bar-chart data-url="">
            </bar-chart>

        </div>
    </div>
</div>
<template id="id_bar-chart_template">
<canvas id="id_bar-chart_inside_template"></canvas>
<h3>Inside template</h3>
</template>
<script src="js/Chart.min.js"></script> 
<script>src="/custom_elements/bar_chart.js"></script>

Согласно https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template, там нетограничение на содержание шаблона тега.

Answer 1

По умолчанию display Стиль пользовательского элемента в CCS: inline.

Вы должны сделать его block или inline-block, и вы увидите <canvas> внутри вашего пользовательского элемента.

<style>
    canvas { border: 1px solid black }
    bar-chart { border: 1px solid red ; display: block }
</style>

class BarChart extends HTMLElement {
  connectedCallback() {
    let templateEl = document.getElementById("id_bar-chart_template");
    this.append(templateEl.content.cloneNode(true));
    let ctx = this.querySelector("#id_bar-chart_inside_template");
        new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            datasets: [
                {
                    label: "Population (millions)",
                    backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                    data: [2478, 5267, 734, 784, 433]
                }
            ]
        },
        options: {
            legend: {display: false},
            title: {
                display: true,
                text: 'Predicted world population (millions) in 2050'
            }
        }
    });
  }
}
customElements.define("bar-chart", BarChart);

canvas { border: 1px solid black }
bar-chart { border: 1px solid red ; display: inline-block }

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js></script>
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1>Products and brands of vendors</h1>
            <bar-chart data-url="">
            </bar-chart>
        </div>
    </div>
</div>
<template id="id_bar-chart_template">
    <canvas id="id_bar-chart_inside_template"></canvas>
    <h3>Inside template</h3>
</template>