Published on May 9, 2024

What are web components ?

Tanvi Nadkarni

@wiselandinc

What are web components ?

Web components are reusable HTML elements. You can share these reusable HTML elements with others after you write them and others can reuse them without worrying about their implementation. Web components are also built using standard web technologies and do not rely on any third party library which means you can be rest assured that they will work on any modern browser with low footptring.

Which technologies are used to make web components ?

Web components are not a new standard but rather rely on existing web standards like HTML, ES Modules, CSS, DOM API etc. The most important standard however here is the "Custom Elements Specification" which is part of HTML's living standard. This is what makes it possible to have web components in first place.

How to write a custom wen component ?

Writing custom web components is very simple as it does not involve learning any special library.


class MyComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<h1>Hello from my web component!</h1>';
  }
}

customElements.define('my-component', MyComponent);

HTML


<my-component></my-component>

It is that simple really.

Best practices of web components

Writing a functional web component is very simple and yet there are many nuances that you must be aware of before writing one that can be reused across many applications.

Good API Design

Note that the HTML tags we use today are extremely carefully designed. There is lot of thought that has gone into their naming and apis such as supported events and attributes. For a custom web component this is very critical.

Proper Namespacing

Remember that since many people might be writing Web components you want to make sure your Web component has a unique name. That way it wont conflict with others.

Accessibility

Accessibility is a strong feature of existing HTML tags. You need to make sure that your web components are also accessibility ready and do not break screen readers or high/low contrast settings. Support for keyboard, ARIA tags etc. is critical.

Beware of interoperabilioty

Modern web is full of React and Angular and other libraries so you should make sure your web components work well with them.

Conclusion

Web component technology is going to get popular as it is simple basic and based on DIY principles. Once it plays well with react and other frameworks, it will certainly see widespread adoption. Learning it is strongly recommended.

References

See all posts