HTML custom element

Categoryprogramming
Tags
Created

HTML custom element

Example of how to implemente a custom HTML element. For this example we are going to try to create a circle.

Required code

JavaScript definition of the element

First, we need to define the element through javascript.

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// shape.js
class Circle extends HTMLElement {
    constructor() {
        super();

        const shadow = this.attachShadow({ mode: 'open' });
        shadow.appendChild(document.createElement('style'));
        shadow.appendChild(document.createElement('div'));
    }

    static get observedAttributes() {
        return ['color', 'radius'];
    }

    connectedCallback() {
        this.updateStyle();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        this.updateStyle();
    }

    updateStyle() {
        let radius = parseInt(this.getAttribute('radius') || 10);
        let color = this.getAttribute('color') || 'transparent';
        this.shadowRoot.childNodes.forEach((child) => {
            if (child.nodeName === 'STYLE') {
                child.textContent = `
                    div {
                        background-color: ${color};
                        height: ${radius * 2}px;
                        width: ${radius * 2}px;
                        border-radius: 50%;
                    }
                `;
            }
        });
    }
}

customElements.define('shape-circle', Circle);

HTML usage

Then we can import our element from the HTML and use it like a native tag.

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <script src="shapes.js"></script>
        <style>
            shape-circle {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <shape-circle color="#42f4ce" radius="200"></shape-circle>
    </body>
</html>

Final result

This is an example of the final result

HTML custom element