“This is the 31st day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Having learned some basic theoretical knowledge about Web Components, we learned the following concepts:

  • Custom Elements
  • Shadow DOM
  • Templates
  • Slots

And the subpoints associated with these concepts.

Theoretical knowledge is basically enough, from now on we need to apply theory to practice, let theory serve practice. Today, we will use the relevant knowledge of Web Components to achieve the production of MyCard, the prototype of the ID card we all have as a reference.

The final basic layout effect is as follows:

Using Templates Layout

Here we build the layout using an HTML template as follows:

<template id="card_layout">
    <style>
        * {
            box-sizing: border-box;
        }

        :host {
            display: inline-block;
            width: 400px;
            height: 240px;
            border: 1px solid black;
            border-radius: 10px;
            box-shadow: -2px -2px 5px 0px #7a8489;
        }

        .container {
            display: flex;
            flex-direction: column;
            padding: 10px;
            height: 100%;
        }

        .card-body {
            flex: 1;
            display: flex;
        }

        .card-footer {
            padding: 10px 0;
        }

        .main-info {
            flex: 2;
        }

        .photo {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .photo img{
            width: 100%;
        }

        .info-row {
            display: flex;
            padding-top: 15px;
        }

        .info-column {
            display: flex;
            align-items: center;
        }

        .info-title {
            padding: 0 10px;
            color: #0e5bd3;
            font-size: 12px;
            word-break: keep-all;
        }

        .info-content {
            letter-spacing: 2px;
        }
    </style>
    <div class="container">
        <div class="card-body">
            <div class="main-info">
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">The name</div>
                    </div>
                    <div class="info-content">Programming samadhi</div>
                </div>
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">gender</div>
                        <div class="info-content">male</div>
                    </div>
                    <div class="info-column">
                        <div class="info-title">national</div>
                        <div class="info-content">han</div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">born</div>
                        <div class="info-content">2022</div>
                    </div>
                    <div class="info-column">
                        <div class="info-title">years</div>
                        <div class="info-content">12</div>
                    </div>
                    <div class="info-column">
                        <div class="info-title">month</div>
                        <div class="info-content">12</div>
                    </div>
                    <div class="info-column">
                        <div class="info-title">day</div>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-column">
                        <div class="info-title">address</div>
                    </div>
                    <div class="info-content">Room XX, Xx Building, XX Unit, XX Community, XX Street, XX District, XX City, XX Province</div>
                </div>
            </div>
            <div class="photo">
                <img src="./static/photo.jpg">
            </div>
        </div>
        <div class="card-footer">
            <div class="info-row">
                <div class="info-column">
                    <div class="info-title">Citizenship Number</div>
                </div>
                <div class="info-content">12345678901234567X</div>
            </div>
        </div>
    </div>

    </div>
</template>
Copy the code

Create custom elements

Using the method we learned earlier, create a basic custom element, my-card, and add a Templates layout to your custom component as follows:

class MyCard extends HTMLElement {
    constructor () {
        super(a);this.shadow = this.attachShadow({mode: "open"});
        let tempEle = document.getElementById("card_layout");
        this.shadow.appendChild(tempEle.content);
    }
}
customElements.define("my-card", MyCard);
Copy the code

Use custom elements

Add the my-card tag to the body of HTML:

<my-card></my-card>
Copy the code

conclusion

The final result is shown at the beginning of the article.

In this article, we have implemented the basic layout and styles using only Custom Elements and Templates, with little utility.

In the future, Slots will be added to make custom elements reusable.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!