# \<error-message>

:floppy\_disk: [replit](https://replit.com/@pegasusroe/lesserror-messagegreater#script.js)

{% tabs %}
{% tab title="JS" %}
```javascript
// ⭐️ 1. custom web component
class ErrorMessage extends HTMLElement {

    // connected to document
    connectedCallback() {

        // attach shadow root (root == this.shadowRoot)
        let root = this.attachShadow({mode: 'open'});
        
        this.templates = root.appendTag('div');
        this.container = root.appendTag('div');

        // fill in templates
        this.templates.innerHTML = ErrorMessage.templates(); 
        
        // choose which template to use
        const kind = this.attr(`kind`);
        const template = this.templates.$(`template.${kind}-type`); 
        
        if (template) {
            const clone = template.content.cloneNode(true);
            this.container.append(clone); 
        }

    }

    // template HTML
    static templates() {

        // 3 templates
        // - template.warning-type
        // - template.error-type
        // - template.none-type
        return ` 
            <template class="warning-type">
                <style> 
                    .warning { 
                        background-color: yellow; 
                        padding: 15px; 
                        color: red; 
                    } 
                </style>

                <div class="warning">
                    <slot>Error component<slot> 
                </div> 
            </template>

            <template class="error-type">
                <style>
                    .error { 
                        background-color: red; 
                        padding: 15px; 
                        color: yellow; 
                    }
                </style>

                <div class="error">
                    <slot>Error component<slot> 
                </div> 
            </template>

            <template class="none-type">
                <style> 
                    .none { 
                        background-color: gray; 
                        padding: 15px; 
                        color: #eee; 
                    } 
                </style>

                <div class="none">
                    <slot>Error component<slot> 
                </div> 
            </template>
        `;
    }
} 

// ⭐️ 2. custom tag <error-message>
customElements.define('error-message', ErrorMessage);
```
{% endtab %}

{% tab title="HTML" %}
```markup
<!-- web components -->
<error-message kind="none">"none" error message</error-message>
<error-message kind="warning">this is a warning</error-message>
<error-message kind="error">this is an error message</error-message>

<!-- scripts -->
<script src="helpers.js"></script>
<script src="script.js"></script>
```
{% endtab %}

{% tab title="📗 參考" %}
* helpers.js 👉 [JS 常用函數](../../browser/dom/querying-elements/dom)
{% endtab %}

{% tab title="shadow tree" %}
![](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mj4-iTMaQNIur_T0i4w%2F-Mj416o3nXFljMjBxFtp%2Ferror-message-shadow-tree.png?alt=media\&token=63a89f09-b570-49b4-b40a-af6f9ee2d1d3)
{% endtab %}
{% endtabs %}
