i recently started reworking my website, mainly adding features or rewriting code. Now, I wanted to add a socials-page (with my social-media links) and i want my JavaScript to import the cards from a JSON-document. For that, i need to select the socialsTitle, socialsLink, socialsLinkDisplay and socialsIcon-elements to put in their values. For selecting those elements. I did this, but the only element that's just returning null is the socialsLink.

JS:

const socialsTitle = socialsCard.querySelector("[socialsTitle]");
const socialsLink = socialsCard.querySelector("[socialsLink]");
const socialsLinkDisplay = socialsCard.querySelector("[socialsLinkDisplay]");
const socialsIcon = socialsCard.querySelector("[socialsIcon]");

HTML:

<template socialsTemplate>
    <a target="_blank" class="card socialsElement" socialsLink>
        <img alt="" class="appIcon socialsElement" socialsIcon />
        <h1 class="appDetails socialsElement">
            <p class="appName socialsElement" socialsTitle></p>
            <p class="appLink socialsElement" socialsLinkDisplay></p>
        </h1>
    </a>
</template>