DS Log

In my blog, I delve into the world of programming web technologies, Linux, Unix-like, and graphic design using free tools on Linux.

Sunday, August 4, 2024

Simple Web Component Example

Web components are a set of features that provide a standard component model for the web that enables the encapsulation and interoperability of individual HTML elements.

So, it's about the technology that allows us to make components like those in React. This is useful for us because we can have components that we can reuse. So we can easily import the components as js/css files and adapt them to the rest of the HTML page. We will not deal in detail with everything that web components are, but only with the part that allows us to reuse the component code.

Such components are also useful in WordPress where we use them through the 'raw html' block.

A simple example

It is important that the HTML TAG name should be in 'two-parts' meaning and after that, it would be desirable for the name of the JS class to be camelCase 'Two-Parts'. We have a CSS section where we will just design a simple rectangle (button) with the name of the component.

ds-hello-world{
    color: white;
    width: 24px;
    height: 24px;
    padding: 20px;
    background: blueviolet;
}

We'll insert something into the HTML that is similar to JSX, that is, what happens in React:

<ds-hello-world name="Hello Damir"> </ds-hello-world>

And not to complicate things further, here is the JS part:

class DsHelloWorld extends HTMLElement 
{
    constructor() 
    {
        super();
        const name = this.getAttribute('name');
        this.innerHTML = name;        
    }
}
customElements.define( 'ds-hello-world', DsHelloWorld);

See the Pen uvod u web komponente by Damir Šijaković (@dsijak) on CodePen.

The WordPress 'raw html' block looks like this:

<style>
ds-hello-world{
    color: white;
    width: 24px;
    height: 24px;
    padding: 20px;
    background: blueviolet;
}
</style>

<ds-hello-world name="Hello Damir"> </ds-hello-world>

<script>
class DsHelloWorld extends HTMLElement 
{
    constructor() 
    {
        super();
        const name = this.getAttribute('name');
        this.innerHTML = name;        
    }
}

customElements.define( 'ds-hello-world', DsHelloWorld);
</script>

Other examples

Some more advanced examples are here: Checkbox component:

See the Pen checkbox web-component by Damir Šijaković (@dsijak) on CodePen.

Accordion component:

See the Pen Simple Web Component Example by Damir Šijaković (@dsijak) on CodePen.

posted by damirs @ August 04, 2024