Michael North "The Road to Native Web Components"

Mike North
CTO Levanto Financial
The Road to Native Web Components

INTRODUCTION
WHO’S THIS GUY?
▸ CTO Levanto Financial
▸ frontendmasters.com instructor
▸ Product Guy
▸ I do a lot of JavaScript OSS stuff
▸ I work with Ember & React a lot

INTRO
DO YOU USE WEB COMPONENTS? (YES)

INTRO
THE W3C WEB COMPONENT SPEC
HTML IMPORTS
HTML TEMPLATES
CUSTOM ELEMENTS
SHADOW DOM

INTRO
HTML IMPORTS
▸ require() for HTML
▸ onload, onerror events
▸ can bring in css/html/js
▸ closure-like js characteristics

INTRO
CUSTOM ELEMENTS
▸ Custom HTML vocab
▸ Life-cycle
▸ Extensibility
▸ Interoperability (we hope?)

INTRO
HTML TEMPLATES
▸ Inert HTML in the DOM
▸ Defer loading / rendering
▸ Think: handlebars/jade/etc…

INTRO
SHADOW DOM
▸ CSS Encapsulation
▸ DOM encapsulation
▸ Each component has own
subtree w/in parent page

<!DOCTYPE html>
<html>
<head></head>
<body>
<template id="something">
<div class="frame">
<h3 class="title">I am a title</h3>
<p class="body">I am the body</p>
</div>
</template>
</body>
</html>

<style type="text/css">
.title {
font-size: 24px;
}
</style>

<script type="text/javascript">
</script>

<div class="frame">
</div>
</template>

// Grab the template
var tmpl = document.querySelector(‘#something');
Add the cloned document fragment to the DOM
document.body.appendChild(
// Clone the template's document fragment
document.importNode(tmpl.content, true)
);

http://codepen.io/TrueNorth/pen/xbyVgL?editors=101

HOW DO FRAMEWORKS
HANDLE THIS?

define('examples/templates/index', ['exports'], function (exports) {
'use strict';
exports['default'] = Ember.HTMLBars.template((function() {
return {
...
buildFragment: function buildFragment(dom) {
var el0 = dom.createDocumentFragment();
var el1 = dom.createTextNode("Hello, ");
dom.appendChild(el0, el1);
var el1 = dom.createElement("strong");
var el2 = dom.createComment("");
var el2 = dom.createTextNode(" ");
var el2 = dom.createComment("");
var el1 = dom.createTextNode("!");
return el0;
},
buildRenderNodes: function buildRenderNodes(dom, fragment,
contextualElement) {
var element0 = dom.childAt(fragment, [1]);
var morphs = new Array(2);
morphs[0] = dom.createMorphAt(element0,0,0);
morphs[1] = dom.createMorphAt(element0,2,2);
return morphs;
},
statements: [
["content","firstName",["loc",[null,[1,15],[1,28]]]],
["content","lastName",["loc",[null,[1,29],[1,41]]]]
],
...
};
}()));
});

LAZY LOADING
Lazy engines, JIT template compiler
Webpack chunking
Webpack chunking

APPLICATION DOM
COMPONENT
SHADOW DOM

SHADOW DOM
ENCAPSULATION http://codepen.io/mike-north/pen/OPBNmq?editors=101

SHADOW DOM
CSS ENCAPSULATION
▸ CSS rules do not usually pierce
shadow roots
▸ CSS deﬁned inside the shadow
root only affects that DOM
▸ :host pseudo-selector for
component boundary
▸ ::shadow penetrates shadow
roots
▸ /deep/ is deprecated
// Inside shadow root
:host {
border: 1px solid red;
}
:host(.hover) {
border: 1px solid blue;
}
// Outside shadow root
#my-thing::shadow p {
color: green;
}

CSS ENCAPSULATION
ember-css-modules
ember-component-css
“component styles”
react-css-modules

<textarea name="comment" id="" cols="30" >
This is the content of my textarea
</textarea>
SHADOW DOM
CONTENT PROJECTION

http://codepen.io/mike-north/pen/emPZMv?editors=1000

CONTENT PROJECTION
{{yield}}
2.x <ng-content>, 1.x ng-transclude
this.props.children

// Get document fragment of an import
var content = document
.querySelector('link[rel="import"]')
.import;

// Get document fragment of an import
var content = document
.querySelector('link[rel="import"]')
.import;
// From a <script> included with the import,
// access imported DOM
var $abc = document
.currentScript
.ownerDocument
.querySelector('.abc');

IMPORTING COMPONENTS
import MyComponent from 'my-component';

CUSTOM ELEMENTS
WHY IS THIS IMPORTANT
▸ Composable building
blocks
▸ Life-cycle
▸ Extensibility
▸ Alignment of HTML with
mental model of your UI

CUSTOM ELEMENTS
REGISTERING
// Extend a DOM element prototype
var MegaButtonProto =
Object.create(HTMLButtonElement.prototype);

CUSTOM ELEMENTS
REGISTERING
// Extend a DOM element prototype
var MegaButtonProto =
Object.create(HTMLButtonElement.prototype);
// Register your new element type
var MegaButton =
document.registerElement("mega-button", {
prototype: MegaButtonProto,
extends: "button"
});

CUSTOM ELEMENTS
ADDING A TEMPLATE
// Template
var infoBoxTemplate = document.querySelector('#info-pane-template');
// Extend a DOM element
var InfoBoxProto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
// Create the shadow root
this.createShadowRoot().appendChild(
// Add the template to the shadow root
document.importNode(infoBoxTemplate.content, true)
);
}
}
});

// Template
var infoBoxTemplate = document.querySelector('#info-pane-template');
// Extend a DOM element
var InfoBoxProto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
// Create the shadow root
this.createShadowRoot().appendChild(
// Add the template to the shadow root
document.importNode(infoBoxTemplate.content, true)
);
}
}
});
CUSTOM ELEMENTS
ADDING A TEMPLATE

CUSTOM ELEMENTS
Ember.Component
@Component
React.Component

DEMO
•Starting Point: http://codepen.io/TrueNorth/pen/PwdLrj
•Componentized: http://codepen.io/TrueNorth/pen/xbyqME
•HTML Importiﬁed: http://codepen.io/TrueNorth/pen/ogawLm

THANKS!
michael.l.north@gmail.com @MICHAELLNORTH

Michael North "The Road to Native Web Components"

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Michael North "The Road to Native Web Components"

Semelhante a Michael North "The Road to Native Web Components" (20)

Mais de Fwdays

Mais de Fwdays (20)

Último

Último (20)

Michael North "The Road to Native Web Components"