# \<user-card>

💾 [replit](https://replit.com/@pegasusroe/user-card#UserCard.js)

{% tabs %}
{% tab title="UserCard.js" %}
```javascript
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);
```
{% endtab %}

{% tab title="html" %}
```markup
<user-card>
  <!-- slotted elements ⭐️ -->
	<span slot="username">John Smith</span>
  <span slot="birthday">01.01.2001</span>
</user-card>
```
{% endtab %}

{% tab title="codepen" %}
{% embed url="https://codepen.io/lochiwei/pen/OJgjrEe" %}


{% endtab %}

{% tab title="📗 參考" %}
* 👉 [Styling in Shadow DOM](../../shadow-dom/styles#cheat-sheet)
{% endtab %}
{% endtabs %}

