自定义HTML标签和属性
我现在真的有点挣扎，我不知道这可能有多难。我在 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">lorem ipsum</my-trophy>
</body>
JS 文件加载在 HTML 文件的标题中
由于它也不是对象，因此我也无法记录my-trophy标签。计划在我的最终 dom 中有多个此类标签。
不管我尝试什么，我都无法获得稀有属性。data即使这是一个自定义 HTML 标记，我是否应该只在这种情况下使用-attributes？
参考：
- https://www.youtube.com/watch?v=jNbOarODRzE
- 我如何允许自定义标签和属性 html？
- 如何为html创建自定义标签
- https://www.html5rocks.com/en/tutorials/webcomponents/customelements/
有些方法根本不起作用（不再起作用？）（例如，它似乎registerElement不再可用，但现在有defineElement）。
我希望，如果我登录console.log(rarity)，输出将是“银”。
对于问题的完整性：我正在尝试运行脚本 Google Chrome
谢谢你的帮助
回答
我运行了你的代码，它与 . 一起工作得很好 constructor ，但你可以试试connectedCallback。每当将元素添加到文档时，都会调用此方法。
在执行<head>之前，请确保您的脚本在文档中运行<body>。HTML/脚本自上而下运行。您的元素需要在呈现之前进行注册。
更新：请参阅Martin Braun 链接的“自定义元素”- JavaScript.info文章以获得更好的理解。可以在此处查看官方 MDN 文档：“使用自定义元素”- 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 rarity="silver"></my-trophy>