<web-components>
<kaaro-intro>
Kartik Arora
Just after graduation in 2015, I worked for Bing Search Engine team for a couple of years and since then have been working on my own venture here in Noida.
We work as a product house, who also provide specialized services if and when needed, in the domain of Web Technologies and IoT.
I am an aspiring developer advocate, DIY enthusiast, a little extrovert and also a flexible opinionated guy.
Social profiles:
[Twitter @karx_brb](https://twitter.com/karx_brb)
[Linkedin](https://www.linkedin.com/in/karx01/)
[Github karx](https://github.com/karx)
[Akriya Technologies](https://akriya.co.in)
</kaaro-intro>
Text
-
Need for Web Components
-
Current state of Web Components
-
What can we do
TIL:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6566961/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6557173/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931405/www-page-1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6557207/9.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6557207/9.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6557207/9.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6557239/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6557273/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6557281/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6566969/pasted-from-clipboard.png)
HTTP
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
April 1993
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6566977/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
April 1993
October 1994
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6566984/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
April 1993
October 1994
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6566988/pasted-from-clipboard.png)
HTML 2.0 is the first real HTML standard
1995
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
April 1993
October 1994
1995
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6566994/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6566998/pasted-from-clipboard.png)
1995-1996
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6567000/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6567003/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929585/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
April 1993
October 1994
1995
1996
1997
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6567010/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6567011/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/7230341/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
April 1993
October 1994
1995
1996
1997
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6567016/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6567017/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
April 1993
October 1994
1995
1996
1997
1998
WaSP
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6567019/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6567121/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
April 1993
October 1994
1995
1996
1997
1998
- WHATWG
- Internet Engineering Task Force
- the World Wide Web Consortium (W3C)
- ECMA TC39
2013
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6567107/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6547972/pasted-from-clipboard.png)
March 1989
1990-1992
April 1993
October 1994
1995
1996
1997
1998
2013
Today
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929459/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/6566981/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929244/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929246/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929247/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929248/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929249/pasted-from-clipboard.png)
Enter - web components
The specifications module!
Theory
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929288/pasted-from-clipboard.png)
-
<template> elements
-
Custom Elements
-
Shadow DOM
-
JavaScript Modules
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931622/pasted-from-clipboard.png)
Browser APIs
Third party APIs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931637/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931638/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931640/pasted-from-clipboard.png)
JavaScript Libraries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931642/pasted-from-clipboard.png)
class BasicWebComponent extends HTMLElement {
constructor() {
super(); // this is mandatory
}
connectedCallback() {
const pElem = document.createElement('p');
pElem.textContent = this.getAttribute('text');
let shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(pElem);
}
attributeChangedCallback(attr, oldVal, newVal) {
}
}
BasicWebComponent.observedAttributes = ['icon'];
customElements.define('basic-webc', BasicWebComponent);
<script type="module" src="./script.js"></script>
.
.
<basic-webc text="hello, this is should be inside the component"></basic-webc>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929577/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929584/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929585/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931434/pasted-from-clipboard.png)
Choose
<kaaro-pokemon>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931475/pasted-from-clipboard.png)
Our choice -
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929585/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931456/pasted-from-clipboard.png)
<kaaro-pokedex>
Our choice -
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5929584/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931434/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931461/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1025748/images/5931463/pasted-from-clipboard.png)
What can You do?
- Start Using Web Components *
- Make and share your own libraries
- Contribute to Specs, discussions*
- Help out community members
* Success guaranteed
Questions?
#ForTheWeb
Web Componentss
By Kartik Arora
Web Componentss
- 1,271