DEV Community

Mahmoud Shaker
Mahmoud Shaker

Posted on

Part1 : Webcomponents benefits!

Alt Text

1.What are the problems?
2.What are the solutions?
3.What is Webcomponent technology?
4.Webcomponents Simple Example
5.Webcomponents Features
6.Who are using webcomponents?

1.What are the problems?

  1. Time to Market
  2. Quality of products.
  3. UX consistency.
  4. The same FE components need to be implemented with different technologies/frameworks.
  5. Control over HTML/CSS/JS for all FE components.
  6. Develop/test components and release a separated version with a low system impact.
  7. QC time.
  8. Organize, Centralize, Unify FE components.

2.What is the solution?

The short answer is: WEBCOMPONENTS

3.What is Webcomponent technology?

Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements. - Wikipedia

4.Webcomponents Simple Example


// Create a class for the element
class MyComponent extends HTMLElement {
    constructor() {
      // Always call super first in constructor

      // Create a shadow root
      const shadow = this.attachShadow({mode: 'open'});

      // Create spans
      const wrapper = document.createElement('span');
      wrapper.setAttribute('class', 'wrapper');

      const info = document.createElement('span');
      info.setAttribute('class', 'info');

      // Take attribute content and put it inside the info span
      const text = this.getAttribute('data-text');
      info.textContent = text;


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


<my-component data-text="Hi I'm new webcomponent"></my-component>

<script src="./index.js"></script>


Webcomponent from

Webcomponent from

5.Webcomponents Features

HTML template: <template> Tag

  1. HTML web standard.
  2. Hide the content from the client.
  3. Use the same tag over and over with different data rendered in the same HTML structure.

ShadowDOM / ShadyDom:

ShadowDOM : Capsulate Styles and javascript Like <iframe> .
ShadyDOM : Uncapsulate the component with limitation.

Custom Elements:

<my-html-tag> Create your own HTML standard tag .

6.Who are using webcomponents?

Google :
SalesForce :


LitElement by google
stenciljs by IONIC


Top comments (0)