Web Componentothree

othree⚫ HappyDesigner, MozTW!

⚫ PhD Candidate @ NTUST, F2E @HTC

https://github.com/othreehttps://blog.othree.net/

othree

Why Web Component

Why

⚫ Rich Internet Applications!

⚫ More and more custom UI!

⚫ Complex → Modularize!

⚫ Reuse

Custom UI

What Developer Want

⚫ Modularize codes, markup and styles!

⚫ Simple and easy to reuse

What Developer Want

⚫ Use <magic-tag> and everything is done

Standards is Not Enough

Standards Changes too Slow

Let Web Extensible

Extensible Web

https://medium.com/the-future-of-the-web/2fcd1c1bb32!

http://extensiblewebmanifesto.org/!

http://www.w3.org/community/nextweb/

Web Component

Not just new markup language

Not one standard

The Standards⚫ Shadow DOM!

⚫ Custom Element!

⚫ HTML Imports!

⚫ Template!

⚫ Scoped Style!

⚫ Mutation Observer … etc

Template

<template>

⚫ Provide reusable DOMNode!

⚫ Parse but not render!

⚫ Used to use <script type="text/template">!

⚫ Not parse at all

http://www.w3.org/TR/html5/scripting-1.html#the-template-element

<template id="sdom">! <header>! <h2>Eric</h2>! </header>! <section>! <div>Digital Jedi</div>! </section>! <footer>! <h4>footer text</h4>! </footer>!</template>

var tpl = document.getElementById('sdom');!!var dom = tpl.content.cloneNode(true);!!shadowRoot.appendChild(dom);

Shadow DOM

Shadow DOM

⚫ Hidden nodes in DOM tree!

⚫ Encapsulation!

⚫ Keep component simple!

⚫ Browser already have this feature

http://w3c.github.io/webcomponents/spec/shadow/

Take a Look

Use

⚫ Create shadow root!

⚫ appendChild to shadow root

var host = document! .querySelector('.custom-component');!!var root = host.createShadowRoot();!!root.innerHTML = html_template_string;

DOM Tree

root

node(host)node

DOM Tree

Shadow Tree

root

node(host)

Shadow root

node

node

Get DOMNodes

⚫ querySelector, querySelectorAll on shadow root!

⚫ DOM API

Style

var html_template_string = !! '<style>div { color: red; }</style>' ! ! + '<div>Click me!</div>';

Style in Shadow DOM

⚫ Scoped by default!

⚫ Possible to import separate css file!

⚫ Path issue

<option>

⚫ How to make custom element like <select>!

⚫ Fill content when using it

<select>

<option>

<magic-tag id="example4">! <h2>Eric</h2>! <h2>Bidelman</h2>! <div>Digital Jedi</div>! <h4>footer text</h4>!</magic-tag>!!<template id="sdom">! <header>! <content select="h2"></content>! </header>! <section>! <content select="div"></content>! </section>! <footer>! <content select="h4:first-of-type"></content>! </footer>!</template>

<content>

⚫ <content> as insertion point!

⚫ CSS selector to select content

Custom Element

Custom Element

⚫ Define your element!

⚫ Use API

http://w3c.github.io/webcomponents/spec/custom/

<element>

⚫ No more in standards

Register Element

registerElement(‘x-button', {prototype: xButtonProto});

element name options

prototype extend

Custom Element Name

⚫ Custom element’s name should have “-”!

⚫ ex: x-button, my-slider!

⚫ With “-”, element don’t know by browser will treat as unresolved element, otherwise it will be unknown element

Unresolved

⚫ :unresolved can use to hide/style unresolved elements!

⚫ Avoid FOUT

Custom Prototype

⚫ Inherit from HTMLElement.prototype!

⚫ Add lifecycle callbacks

Element Lifecycle

⚫ Define in custom element standard!

⚫ created!

⚫ attached!

⚫ detatched!

⚫ attributeChanged

https://www.w3.org/Bugs/Public/show_bug.cgi?id=24314

var doc = document.currentScript.ownerDocument;!!var xButtonProto = Object.create(HTMLElement.prototype);!!!xButtonProto.createdCallback = function () {! var root = this;! var host = this.webkitCreateShadowRoot();! //host blah blah ...!};!!!document.registerElement(‘x-button',! {prototype: xButtonProto}!);

HTML Imports

Imports

⚫ Import more resources for future use!

⚫ Images, Style, Scripts…etc!

⚫ Web Component

http://www.w3.org/TR/html-imports/

<link rel="import" href="path/to/component.html">

<script>

⚫ `document` is importer!

⚫ Easy to work with document!

⚫ How to get its self!

⚫ ex: <template> in importee document

importer importee

document document

document.registerElement!!//register on importer

<link rel="import"! href="…" />

importer importee

document document

<template>! <blah />!</template>

<link rel="import"! href="…" />

importer importee

document document

<template>! <blah />!</template>!!<script>!!// How to get template?!!</script>

<link rel="import"! href="…" />

document.currentScript.ownerDocument;

currentScript

⚫ HTML5 API!

⚫ For 3rd party widgets to locate <script> position

http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-currentscript

importer importee

document document.currentScript

<template>! <blah />!</template>!!<script>!!document.currentScript! .ownerDocument!!</script>

<link rel="import"! href="…" />

All Together

Demohttps://github.com/othree/web-component-test

Libs

X-Tag

⚫ by Mozilla!

⚫ Easy to create custom element

http://www.x-tags.org/

Brick

⚫ by Mozilla!

⚫ Repository for Custom-UI build by X-Tag

http://mozilla.github.io/brick/

Polymer

⚫ by Google!

⚫ Application build upon Web Component!

⚫ Polyfills!

⚫ Share with X-Tag

http://www.polymer-project.org/

more..

⚫ Semantic!

⚫ Accessibility!

⚫ Internationalization!

⚫ Security!

⚫ Performance!

⚫ OS Native UI…

https://www.youtube.com/watch?v=e29D1daRYrQ

Q&A

> B