自定义 HTML 标签和属性答案

【问题标题】：custom HTML tags and attributes自定义 HTML 标签和属性
【发布时间】：2021-06-07 13:32:56
【问题描述】：

我现在真的有点挣扎，我不知道这可能有多难。我在 SO 和 YouTube 上关注了几个不同的教程和答案，但所有人的做法都不同，我现在有点卡住了。

我想要的只是一个custom HTML-Tag 和一些custom attributes

我用这种方法（JS）试过了

class MyTrophy extends HTMLElement {
    constructor() {
    super();

    var rarity = this.getAttribute("rarity");
    console.log("rarity: " + rarity);
    }
}

customElements.define("my-trophy", MyTrophy);

HTML

<body>
    <my-trophy rarity="silver" id="someID">lorem ipsum</my-trophy>
</body>

JS-File 加载到 HTML-File 的头部

由于它也不是对象，所以我也无法记录 my-trophy 标记。计划在我的最终 dom 中有多个此类标签。

我尝试什么都没关系，我没有让稀有属性起作用。我是否应该在这种情况下只使用data-attributes，即使这是一个自定义 HTML 标记？

参考资料：

有些方法根本不起作用（不再起作用？）（例如，registerElement 似乎不再可用，但现在有 defineElement）。

如果我登录console.log(rarity)，我希望输出将是“银”。

为了问题的完整性：我正在尝试在 Google Chrome 中运行脚本

感谢您的帮助

【问题讨论】：

标签： javascript html

【解决方案1】：

我运行了您的代码，它与constructor 配合得很好，但您可以尝试使用connectedCallback。每当将元素添加到文档中时，都会调用此方法。

在执行您的<body> 之前，确保您的脚本在文档的<head> 中运行。 HTML/脚本从上到下运行。您的元素需要在渲染之前进行注册。

更新：请参阅 Martin Braun 链接的 "Custom elements" - JavaScript.info 文章以获得更好的理解。官方 MDN 文档可以在这里查看："Using custom elements" - MDN。

class MyTrophy extends HTMLElement {
  connectedCallback() {
    const rarity = this.getAttribute('rarity');
    console.log(`Rarity: ${rarity}`);
  }
}

customElements.define('my-trophy', MyTrophy);

my-trophy {
  font-size: 3em;
}

my-trophy[rarity="silver"] {
  color: #777;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<my-trophy class="fas fa-trophy" rarity="silver"></my-trophy>

【讨论】：

有趣，connectedCallback() 可以工作。我不知道这是为什么。我会尽快接受这个答案。仍然很奇怪，它对你有用，而对我不起作用。谢谢！我应该添加信息，我在 chrome 上运行它。
@DasSaffe 欲了解更多信息，请查看this article。它解释了自定义元素的所有回调。