WEB

COMP

ONENTS

September 23rd, 2014

Mark Santiago

MWDT

Meetup #4

Housekeeping

• Still looking for Speakers
  • Have a new tool that's improve your workflow?
  • Recently used a hot new framework or library on a project?
  • Share your experience and help fellow devs!
• Recently presented with an offer to merge with WWT.
  • willing to hear opinions on merging
  • pros, cons. 

Web Components 

We're Gonna KEEP IT SIMPLE...

THIS WILL JUST BE A SIMPLIFIED PICTURE 

OF SOMETHING POWERFUL AND COMPLEX

So, what are Web Components?

DOM

Shadow

Like I-FRAMES (But better).

It's already in use...

Crack it open in CHROME:

Shadow Host 

Shadow Root

Child

Child

Child

Child

Shadow Boundary

<TEMPLATE>

Store Markup on the page to use later and clone for easy re-use

Custom Element

YOU CAN DEFINE NEW ELEMENTS 

<cats-rule> 
    <h1>Oh, YEAH!</h1>
</cats-rule>

// Create a prototype for a new element that extends HTMLElement
  var ImgSliderProto = Object.create(HTMLElement.prototype);


// Setup Shadow DOM and clone template
  ImgSliderProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(tmpl.content, true));
  };


 // Register new element
  var ImgSlider = document.registerElement('img-slider', {
    prototype: ImgSliderProto
  });

Using Custom Element with Web Components

HTML IMPORTs

 Using it:

Using only one URL, you can package together a single relocatable bundle of web goodness for others to consume.

-html5Rocks

<link rel="stylesheet" href="custelem.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>


...

<!-- scaffolding markup -->
<template>
  ...
</template>

The file it's importing:

Putting it Together...

With an example from Rob Dobson

          <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class=""></li>
                  <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                  <li data-target="#myCarousel" data-slide-to="2" class=""></li>
                </ol>
                <div class="carousel-inner">
                  <div class="item">
                    <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
                    <div class="carousel-caption">
                      <h4>First Thumbnail label</h4>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                  </div>
                  <div class="item active left">
                    <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
                    <div class="carousel-caption">
                      <h4>Second Thumbnail label</h4>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                  </div>
                  <div class="item next left">
                    <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
                    <div class="carousel-caption">
                      <h4>Third Thumbnail label</h4>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
                  </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
              </div>
            </div>

A Bootstrap Carousel widget

HOW WOULD IT LOOK AS A WEB ELEMENT?

<img-slider>
  <img src="rock.jpg">
  <img src="grooves.jpg">
  <img src="arch.jpg">
  <img src="sunset.jpg">
</img-slider>

(To the developer using it)

The Element file being imported would look like this:

<template>

  <style>
      //Our Styling
  </style>

    
  // what gets inserted into the SHADOW DOM

  <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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/rock.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/grooves.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/arch.jpg">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/sunset.jpg">
        </div> <!-- .inner -->
      </div> <!-- #overflow -->
    </div>
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
  </div>
</template>

And this:

// Polyfill support
HTMLElement.prototype.createShadowRoot = 
  HTMLElement.prototype.createShadowRoot ||
  HTMLElement.prototype.webkitCreateShadowRoot ||
  function() {};

// Add the template to the Shadow DOM
var tmpl = document.querySelector('template');
var host = document.querySelector('.img-slider');
var root = host.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true));

Example from CSS TRICKS ARTICLE BY ROB DOBSON

But is it practical?

Relax! There's always a way!

POLYMER

BRICK

By Google

By Mozilla

Both

• Allow you to build today
• Are striving for interoperability 

a ton of polyfills

POLYMER IS:

Has dependency management and concatination functionality

Aggressively tackling accessibility issues inherent with components.

THANKS!