Javascript 自定义HTML标记和属性_Javascript_Html

Javascript 自定义HTML标记和属性

javascript html

Javascript 自定义HTML标记和属性,javascript,html,Javascript,Html,我现在真的有点挣扎，我不知道这有多难。我在SO和YouTube上看了几个不同的教程和答案，但都做得不一样，我现在有点卡住了我只需要一个带有一些自定义属性的自定义HTML标记我尝试了这种方法（JS） HTML 乱数假文 JS文件加载到HTML文件的头中因为它不是一个对象，所以我不能同时记录my trophy标签。按照计划，我在最终dom中有多个此类标记无论我尝试了什么，我都无法让稀有属性发挥作用。即使这里是一个自定义的HTML标记，我是否应该只使用数据-属性来处理这种情况参考资料：

我现在真的有点挣扎，我不知道这有多难。我在SO和YouTube上看了几个不同的教程和答案，但都做得不一样，我现在有点卡住了

我只需要一个带有一些自定义属性的

自定义HTML标记

我尝试了这种方法（JS）

HTML


乱数假文

JS文件加载到HTML文件的头中

因为它不是一个对象，所以我不能同时记录

my trophy

标签。按照计划，我在最终dom中有多个此类标记

无论我尝试了什么，我都无法让稀有属性发挥作用。即使这里是一个自定义的HTML标记，我是否应该只使用

数据-属性来处理这种情况
参考资料：






有些方法根本不起作用（不再？）（例如，registerElement
似乎不再可用，但现在有了defineElement）
如果我记录console.log（稀有）
，我希望输出是“银色的”
关于问题的完整性：我正试图在googlechrome

感谢您的帮助
我运行了您的代码，它与构造函数
配合得很好，但您可以试试。每当向文档中添加元素时，都会调用此方法
在执行
之前，确保脚本在文档的
中运行。HTML/脚本自上而下运行。元素在呈现之前需要注册
更新：请参阅Martin Braun链接的文章，以便更好地理解。可以在此处查看官方MDN文档：

类MyTrophy扩展HtmleElement{
connectedCallback（）{
const rarity=this.getAttribute（'rarity'）；
log（`Rarity:${Rarity}`）；
}
}
自定义元素。定义（'my-trophy'，MyTrophy）
我的奖杯{
字号：3em；
}
我的奖杯[rarity=“silver”]{
颜色：#777；
}

有趣，使用connectedCallback（）它可以工作。我想知道这是为什么。我会尽快接受这个答案。奇怪的是，它对你有效，而对我无效。非常感谢。我应该添加信息，我正在chrome上运行此功能。@DasSaffe有关详细信息，请查看。它解释了自定义元素的所有回调。
class MyTrophy extends HTMLElement {
    constructor() {
    super();

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

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

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