###### tags: `WebHack#29`

# Web-components: Intro and in practise

[Slides](https://slides.com/vaibhav-kumar/web-components-webhack-2019-12-17#/) is here 👈

### Web Components API

- Custom Elements
- Shadow DOM
- HTML templates

### Framework (Stencil) Introduction

[Stencil](https://github.com/ionic-team/stencil) is a Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team.

It is quite similar to Angular and React component. (see following example)

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css'
})
export class MyComponent {

  @Prop() first: string;

  @Prop() last: string;

  render() {
    return (
      <div>
        Hello, my name is {this.first} {this.last}
      </div>
    );
  }
}