我一直在学习Brad Traversy关于Web组件的yt教程，他是一位内容丰富的好老师，我相信你们很多人都知道：(
我已经到了17分钟，尽管我遇到的问题是图像没有像教程中那样显示。。。
它们正在添加到文档流中。。。我能说出这一点是因为布局重新调整以适应图像的空间。。。只是图像没有显示。。。
为了进行比较，我直接在html中添加了一个类似性质的图像，效果很好。
不管怎样，这是我的代码。。。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components Example</title>
<style>
h3 {
color: purple;
}
</style>
</head>
<body>
<h3>Hello World... where's the images?!?!?</h3>
<!-- <user-card name="you oddo" avatar="https://randomuser.me/api/portraits/men/1.jpg"></user-card> -->
<user-card name="huik popp" avatar="38.jpg"></user-card>
<user-card name="som otha"></user-card>
<img src="95.jpg">
<style>h3 {color: green}</style>
<script src="userCard.js"></script>
</body>
</html>
和Javascript。。。UserCard.js:
const template = document.createElement('template');
template.innerHTML = `
<style>
h3 {
color: coral;
}
</style>
<div class="user-card">
<img />
<div>
<h3></h3>
</div>
</div>
`;
class UserCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.shadowRoot.querySelector('h3').innerText = this.getAttribute('name');
this.shadowRoot.querySelector('img').innerText = this.getAttribute('avatar');
}
}
window.customElements.define('user-card', UserCard);
我非常感谢在这方面的任何帮助。到目前为止，我一直很喜欢跟随本教程，我想了解视频中的情况。
非常感谢。
我在这里回答我的问题。。。
在userCard.js中，我有：
this.shadowRoot.querySelector('img').innerText = this.getAttribute('avatar');
应该是：
this.shadowRoot.querySelector('img').src = this.getAttribute('avatar');
告诉Brad他可以将代码缩短为：
class UserCard extends HTMLElement {
constructor() {
super()
.attachShadow({ mode: 'open'})
.innerHTML = `
<style>
h3 {
color: coral;
}
</style>
<div class="user-card">
<img />
<div>
<h3></h3>
</div>
</div>
`;
...
}
);