Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Components v1
Search
hemanth.hm
April 13, 2017
Programming
1
92
Web Components v1
Quick intro to Web Components v1
hemanth.hm
April 13, 2017
Tweet
Share
More Decks by hemanth.hm
See All by hemanth.hm
Rethink Async
gnumanth
1
80
Harmony with ES6!
gnumanth
6
1.1k
Ants and Algorithm
gnumanth
1
110
NoSQL?
gnumanth
1
220
Google's whitepaper
gnumanth
3
120
Python Intro
gnumanth
1
370
Other Decks in Programming
See All in Programming
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
新宿ダンジョンを可視化してみた
satoshi7190
2
250
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Ruby Pattern Matching
bkuhlmann
0
930
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
140
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
910
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
410
雑に思考を整理する技術と効能
konifar
58
29k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Ruby GitHub Packages
bkuhlmann
0
630
Git Lint
bkuhlmann
4
750
Featured
See All Featured
Navigating Team Friction
lara
178
13k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Product Roadmaps are Hard
iamctodd
44
9.7k
Ruby is Unlike a Banana
tanoku
96
10k
Agile that works and the tools we love
rasmusluckow
325
20k
What's new in Ruby 2.0
geeforr
337
31k
Producing Creativity
orderedlist
PRO
337
39k
Bash Introduction
62gerente
604
210k
Facilitating Awesome Meetings
lara
42
5.6k
Transcript
Web Componentes
· <template> tag · HTML imports · Shadow DOM ·
Custom Elements
<template>
'content' in document.createElement('template');
Activating <template>: var t = document.querySelector('#aweTemplate'); var clone = document.importNode(t.content,
true); document.body.appendChild(clone);
DEMO
HTML imports
'import' in document.createElement('link');
<link rel="import" href="/imports/aweTemplate.html"> <link rel="import" href="/imports/aweTemplate.html" onload="handleLoad(event)" onerror="handleError(event)">
const link = document.querySelector('link[rel=import]'); const xkcd = link.import; // Access
DOM of the document in aweTemplate const cartoon = xkcd.querySelector('img');
const aweDoc = document.currentScript.ownerDocument;
DEMO
Shadow DOM
const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;
const host = document.body.createShadowRoot(); host.innerHTML = "<p>I'm a <em>shadow</em> dom!</p>";
document.appendChild(host);
DEMO
Custom Elements
const supportsCustomElements = 'customElements' in window;
class AweElement extends HTMLElement {...} window.customElements.define('awe-element', AppDrawer);
window.customElements.define('awe-element', class extends HTMLElement {...});
class AweElement extends HTMLElement { constructor() { super(); // Don't
forget ... } connectedCallback() { ... } disconnectedCallback() { ... } attributeChangedCallback(attrName, oldVal, newVal) { ... } }
None
DEMO
None
None
h3manth.com @gnumanth
None