<user-card>

💾 replit

UserCard.js

class UserCard extends HTMLElement {

    // connected to document
    connectedCallback() {
        
        // attach shadow root
        const root = this.attachShadow({mode: 'open'});

        // ⭐️ named slots in shadow dom tree
        root.innerHTML = `
            <style>
                :host {
                    display: flex;
                    flex-direction: column;
                    padding: .5rem;
                    border: 1px solid black;
                }
                ::slotted(*) {
                    border: 1px solid black;
                    padding: 0 4px;
                    display: inline-block;
                    margin: 2px auto;
                    background-color: hsla(60, 80%, 50%, 0.4);
                }
                ::slotted(:hover) {
                    background-color: hsla(90, 80%, 50%, 0.8);
                }
            </style>
            <div>Name:
                <slot name="username"></slot>
            </div>
            <div>Birthday:
                <slot name="birthday"></slot>
            </div>
        `;
    }
}

customElements.define('user-card', UserCard);

html

<user-card>
  <!-- slotted elements ⭐️ -->
	<span slot="username">John Smith</span>
  <span slot="birthday">01.01.2001</span>
</user-card>

codepen

📗 參考

• 👉 Styling in Shadow DOM