COMP
ONENTS
September 23rd, 2014
Mark Santiago
Housekeeping
THIS WILL JUST BE A SIMPLIFIED PICTURE
OF SOMETHING POWERFUL AND COMPLEX
DOG
<<< This is a custom Element hiding a shadow DOM
Shadow Host
Shadow Root
Child
Child
Child
Child
Shadow Boundary
Nothing would load:
No HTTP Request for that GIF!
YOU CAN DEFINE NEW ELEMENTS
-ABSTRACTS AWAY COMPLEXITY FROM END USER
-HAS UNIQUE SET OF LIFE CYCLE EVENTS
CAN EXTEND EXISTING ELEMENTS
<cats-rule>
<h1>Oh, YEAH!</h1>
</cats-rule>
<button>
Submit
</button>
<evil-button>
Resistance is FUTILE
</evil-button>
-LOGICALLY BUNDLE TOGETHER CUSTOM FUNCTIONALITY INTO A SINGLE TAG
Super Button
User Avatar
STAT-HOLDER
SINGLE-BILL
// 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
<link rel="import" href="nameof-element.html">
That's about it...
-Easy to bring a component to use on page
-A component can import more components
-Easy to distribute through bower or npm.
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>
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>
<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>
// 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
Relax! There's always a way!
By Google
By Mozilla
AND MUCH MORE....