lundi 30 août 2021

How to link a js script in a template web component (vanilla js)?

I am working on a web component to display cards in my web page. In the example, the initial card uses a link to a js script (tiltjs). I would like to know how to call the script in my web component template card? So that this card can also use the tiltjs script.

Thanks for your help.

Link: https://codepen.io/nicolastilly/pen/eYRJNEj?editors=1010

My code:

<!-- html card -->
<div class="carte1">
        <div class="card" data-tilt data-tilt-scale="1.04">
            <div class="front">
                <p class="card-title">
                    Title
                </p>
                <div class="extension">
                    ✻
                </div>
                <div class="numero">
                    0/8
                </div>
            </div>
            <div class="back"></div>
        </div>
    </div>


<br><br><br><br>

<!--web component card-->
<card-model></card-model>

<template>
    <style>
        .card {
            width: 300px;
            height: 450px;
            border-radius: 20px;
            background-color: #ccc;
            position: relative;
        }

        .card-title {
            font-family: "SpaceGrotesk-Light";
            position: absolute;
            text-align: center;
            margin: auto;
            left: 0;
            right: 0;
            top: 20px;
            font-size: 18px;
            color: black;
        }

        .extension {
            font-family: "SpaceGrotesk-Light";
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: black;
        }

        .numero {
            font-family: "SpaceGrotesk-Light";
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: black;
        }

        .front {
            background-color: #ccc;
            border-radius: 20px;
        }

        .back {
            border-radius: 20px;
            background-color: #ffffff;
            opacity: 1;
            background-image: linear-gradient(30deg,
                    #000000 12%,
                    transparent 12.5%,
                    transparent 87%,
                    #000000 87.5%,
                    #000000),
                linear-gradient(150deg,
                    #000000 12%,
                    transparent 12.5%,
                    transparent 87%,
                    #000000 87.5%,
                    #000000),
                linear-gradient(30deg,
                    #000000 12%,
                    transparent 12.5%,
                    transparent 87%,
                    #000000 87.5%,
                    #000000),
                linear-gradient(150deg,
                    #000000 12%,
                    transparent 12.5%,
                    transparent 87%,
                    #000000 87.5%,
                    #000000),
                linear-gradient(60deg,
                    #00000077 25%,
                    transparent 25.5%,
                    transparent 75%,
                    #00000077 75%,
                    #00000077),
                linear-gradient(60deg,
                    #00000077 25%,
                    transparent 25.5%,
                    transparent 75%,
                    #00000077 75%,
                    #00000077);
            background-size: 20px 35px;
            background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
        }
    </style>

    <div class="carte1">
        <div class="card" data-tilt data-tilt-scale="1.04">
            <div class="front">
                <p class="card-title">
                    Web component card
                </p>
                <div class="extension">
                    ✻
                </div>
                <div class="numero">
                    0/8
                </div>
            </div>
            <div class="back"></div>
        </div>
    </div>

</template>


//js 

class cardModel extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: "open" });
        const template = document.querySelector("template");
        this.shadowRoot.appendChild(template.content.cloneNode(true));

    }

}
window.customElements.define("card-model", cardModel);
```



Aucun commentaire:

Enregistrer un commentaire