Веб-компоненты в HTML

Создание переиспользуемых компонентов с помощью Custom Elements.

Пример простого компонента:

<template id="user-card">
    <style>
        .user-card {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }
    </style>
    <div class="user-card">
        <h3></h3>
        <p>Email: <slot name="email"></slot></p>
    </div>
</template>

<script>
class UserCard extends HTMLElement {
    constructor() {
        super();
        const template = document.getElementById("user-card");
        const shadowRoot = this.attachShadow({mode: "open"});
        shadowRoot.appendChild(template.content.cloneNode(true));
        shadowRoot.querySelector("h3").textContent = this.getAttribute("name");
    }
}

customElements.define("user-card", UserCard);
</script>

<user-card name="Иван Иванов">
    <span slot="email">ivan@example.com</span>
</user-card>