个人中心
gpt4 book ai didi

html - 创建 Web 组件时出错

转载 作者：行者123 更新时间：2023-11-28 05:13:09 24 4
gpt4 key购买 nike

我是网络组件的新手，我正在尝试创建一个非常简单的组件来了解它的工作原理。但是我在创建一个时遇到了问题。我遵循了 chrome 中提到的步骤和 Mozilla文档，但我仍然无法成功创建一个，也找不到问题。

class toolTip extends HTMLElement {
  var msg = this.getAttribute('msg');
  var value = this.getAttribute('value');
  console.log(msg);
  console.log(value);
  this.innerHTML = msg + ' - ' + value;
}

customElements.define('mdm-tooltip', toolTip);
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Web Components</title>
</head>

<body>
  <mdm-tooltip value='1st tooltip' msg='this the 1st tooltip created using WC'></mdm-tooltip>
  <mdm-tooltip value='2nd tooltip' msg='I replaced the existing text'>Im the existing text</mdm-tooltip>
</body>
<script src="main.js" defer></script>

</html>

这是浏览器抛出的错误，我在 Chrome V67.0.3396.99 中运行这段代码

This is error browser throws

最佳答案

在类中，您需要定义实际包含可执行代码的方法。在您的情况下，您的代码看起来很像初始化代码，因此构造函数似乎是合适的。

class ToolTip extends HTMLElement {
    constructor() {
        let msg = this.getAttribute('msg');
        let value = this.getAttribute('value');
        console.log(msg);
        console.log(value);
        this.innerHTML = msg + ' - ' + value;
    }
}

customElements.define('mdm-tooltip', ToolTip);

此外，JavaScript 中的命名约定之一是类应该采用 Pascal 大小写(以大写字母开头)。

关于html - 创建 Web 组件时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51348658/

24 4 0
文章推荐： c++ - 如何使用 FreeImage 获取子图像
文章推荐： c++ - 在运行的 JVM 中注入(inject) Jar 并替换类
文章推荐： html - 创建消息框
文章推荐： c++ - 如何在QT中写一个旋转里程表？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com