Web component 101

Web Components, the future of the web

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

Key Specifications

Web Components are made up of four key specifications:

SPECIFICATION DESCRIPTION STATUS
Custom Elements Use JavaScript to write new elements that act like regular HTML elements in the browser
Shadow DOM Create DOM trees that are hidden from gobal CSS styles and DOM queries. Allows you to hide the implementation details of a custom element
HTML Template Declare fragments of HTML which aren’t used at when the page is loaded, but can be used later. Used to manage the internal markup of a custom element. HTML5 Living Standard
HTML Imports Import other HTML documents, each of which can reference JavaScript, CSS, etc. Used for managing dependencies.

Why?

HTML markup includes special “elements” such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video> and many others.

But now you can create components in framework like vuejs, react etc which we can use/reuse it as html element. eg. <mutiselect>, <loader>, <datepicker>, etc. But those components are specific to framework. We can not use those component in other framework. Suppose you create multiselect component in Vue but you can not use the same in React. So, we call them framework component.

You can use webcomponents anywhere. Webcomponents are interoperable.

How?

Lets take an example and create a toggle button.

Using Custom Elements:

Step 1 : create folder wc-toggle-btn. And create index.html open the same in browser.

Step 2: create file wc-toggle-btn.js in the same folder and write the following code.

class WcToggleBtn extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback () {
    console.log('inside connectedCallback');
    this._content = document.createElement('span');
    this._content.innerText = ToggleBtn;
    this._content.className = 'container';
    this.appendChild(this._content);
  }
}

window.customElements.define('wc-toggle-btn', WcToggleBtn);
  • constructor() is called when the element is created.
  • connectedCallback() is called when (after) the element is attached to the DOM

Step3: use this component in index.html

<script src="wc-toggle-btn.js"></script>
<wc-toggle-btn></wc-toggle-btn>

And add style for this component.

<style>
.container{
	background-color: red;
}
</style>

Now your component will work. You can see Text togglebtn with red background.
But it is not web component because you can not write style of component in index.html(where you use the component) it should be in the component itself.
We will solve this problem in next step. Stay tuned.

Step4: Using HTML Template:

Now your wc-toggle-btn.js file should look like

const template = document.createElement('template');
template.innerHTML = `
  <style>
  .container {
    background-color: red;
  }
  </style>
  <span id="value" class="container">wc toggle btn</span>
`;

class WcToggleBtn extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    console.log('inside connectedCallback');
    const templateContent = template.content.cloneNode(true);
    this._content = templateContent.getElementById('value'); // will use in future
    this.appendChild(templateContent);
  }
}

window.customElements.define('wc-toggle-btn', WcToggleBtn);

Now style of your component is inside the component which is good. But still it is not web component because if you have some other component which uses same class name then css will override.

This is not acceptable we will solve this one in next step. Stay tuned.

Step 5:
Using Shadow DOM:

You just need to add 2 lines in connectedCallback function

  • Remove :
    this.appendChild(templateContent);
    
  • Add:
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(templateContent);
    

Here we are creating a shadow dom and add the template inside shadow dom which will solve our overriding css problem.

We are so close to create web component.

Step 6:
HTML imports:

Web component’s last specification is Html imports:

Now we create one file wc-toggle-btn.html in the same folder and import js file in this file

This file will look like

<html>
  <head></head>
  <body>
    <script src="wc-toggle-btn.js"></script>
  </body>
</html>

And index.html will look like

<html>
<head>
  <title></title>
  <link rel="import" href="./wc-toggle-btn.html">
</head>
<body>
	<wc-toggle-btn></wc-toggle-btn>
</body>
</html>

We are done. We have created we component but it is not toggle button. To create toggle button we need to send some props and dispatch some events also

Code of toggle button is here.

Demo is here

References:

https://dzone.com/refcardz/introduction-to-web-components-and-polymer https://www.webcomponents.org/introduction


How am I driving?

Assessing car health from OBD data

The central promise of Zoom’s car rental offering is to provide our customers a great ride. Having a car in good working condition is critical for us to fulfil that promise. This poses a very interesting problem from a maintenance scheduling perspective. Unlike a privately owned car, our cars are driven by several different people each day. From a young college student going for a joyride, to a well planned 5 day road-trip. Each journey exhibits different driving patterns and puts unique stresses on the car.

Building immersive AR experience with React Native

User Engagement: