HTML标记模板未呈现画布标记元素
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,对模板标签的内容没有限制。
答案 0 :(得分:3)
“自定义元素”的默认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>