gpt4 book ai didi

javascript - 自定义 HTML 标签和属性

转载 作者:行者123 更新时间:2023-12-03 21:04:49 26 4
gpt4 key购买 nike

我现在真的有点挣扎,我不知道这可能有多难。
我在 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>

The JS-File is loaded in the header of the HTML-File


由于它也不是对象,因此我无法记录 my-trophy标记为好。计划在我的最终 dom 中有多个此类标签。
我尝试什么都没关系,我没有让稀有属性起作用。我应该只使用 data -这种情况下的属性,即使这是一个自定义 HTML 标记?
引用:
  • https://www.youtube.com/watch?v=jNbOarODRzE
  • How can i allow custom tags and attributes html?
  • How to create custom tags for html
  • https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

  • 有些方法根本不起作用(不再起作用?)(例如,似乎 registerElement 不再可用,但现在有 defineElement)。
    我希望,如果我登录 console.log(rarity) ,输出将是“银”。
    为了问题的完整性:我正在尝试在 Google Chrome 中运行脚本
    谢谢你的帮助

    最佳答案

    我运行了您的代码,它与 constructor 配合得很好, 但你可以试试 connectedCallback 反而。每当将元素添加到文档中时,都会调用此方法。
    确保您的脚本在 <head> 中运行文件,在您的 <body> 之前被执行。 HTML/脚本从上到下运行。您的元素需要在呈现之前进行注册。
    更新:请引用"Custom elements" - JavaScript.info为了更好地理解,Martin Braun 链接的文章。官方 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>

    关于javascript - 自定义 HTML 标签和属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67872623/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com