自定义元素模板标记未呈现画布标记元素
自定义元素模板标记未呈现画布标记元素
提问于 2019-01-19 18:28:22
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，对模板标签的内容没有限制。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-19 19:16:48
自定义元素的默认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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54266138
复制相关文章
相似问题
腾讯云开发者
