Web Components

ng-hangout #12

Web Components constiste en distintas tecnologĂ­as independientes. Puedes pensar en Web Components como en widgets de interfaz de usuario reusables que son creados usando tecnologĂ­a Web abierta

By mozilla

Son parte del navegador, y por lo tanto no necesitan bibliotecas externas como jQuery o Dojo.

By mozilla

<div id="slider">
  <input checked="" type="radio" name="slider" id="slide1" selected="false">
  <input type="radio" name="slider" id="slide2" selected="false">
  <input type="radio" name="slider" id="slide3" selected="false">
  <input type="radio" name="slider" id="slide4" selected="false">
  <div id="slides">
    <div id="overflow">
      <div class="inner">
        <img src="images//rock.jpg">
        <img src="images/grooves.jpg">
        <img src="images/arch.jpg">
        <img src="images/sunset.jpg">
      </div>
    </div>
  </div>
  <label for="slide1"></label>
  <label for="slide2"></label>
  <label for="slide3"></label>
  <label for="slide4"></label>
</div>
<img-slider>
  <img src="images/sunset.jpg" alt="a dramatic sunset">
  <img src="images/arch.jpg" alt="a rock arch">
  <img src="images/grooves.jpg" alt="some neat grooves">
  <img src="images/rock.jpg" alt="an interesting rock">
</img-slider>
<ion-slides>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

One code base.
Running everywhere

A SIMPLE COMPILER FOR FAST,
REACTIVE WEB COMPONENTS

https://blog.ng-classroom.com/blog/news/stencil-conf/

Demo time

/ Questions?

Made with Slides.com