Part1 : Webcomponents benefits! 
Tags: webcomponents, designsystem, javascript, react
Published: 2020-03-25 07:32:11

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mjgido6u5qw2lmysgmy2.png)

__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?__ 
__7.Frameworks__ 
__8.Refrences__ 


###__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*](https://en.wikipedia.org/wiki/Web_Components)

###__4.Webcomponents Simple Example__ 

####Scripts.js

```Javascript
// Create a class for the element
class MyComponent extends HTMLElement {
    constructor() {
      // Always call super first in constructor
      super();
  
      // 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;
      
      shadow.appendChild(wrapper);
      wrapper.appendChild(info);
    }
  }
  
customElements.define('my-component', MyComponent);
```
####index.html

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

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

####Preview

![Webcomponent from shakercs.com](https://dev-to-uploads.s3.amazonaws.com/i/s5wpjfnwk3sa1tfnwd1k.png)


![Webcomponent from shakercs.com](https://dev-to-uploads.s3.amazonaws.com/i/xmfc32qiju7b7ldowdj0.png)

###__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. 
https://github.com/webcomponents/polyfills/tree/master/packages/shadydom

####__Custom Elements__: 
**\<my-html-tag>**  Create your own HTML standard tag  .

###__6.Who are using webcomponents?__ 

**Google :** https://amp.dev/documentation/components/?format=websites
**SalesForce :** https://developer.salesforce.com/docs/component-library/bundle/lightning:accordion/example 
**IONIC :** https://stenciljs.com/ 

###__7.Frameworks__  

[LitElement by google](https://lit-element.polymer-project.org/)
[stenciljs by IONIC](https://stenciljs.com/)
[Hybrids](https://hybrids.js.org/)
 
###__8.Refrences__  
https://www.webcomponents.org/
https://html.spec.whatwg.org/multipage/scripting.html#the-template-element