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
110
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
100
Harmony with ES6!
gnumanth
6
1.2k
Ants and Algorithm
gnumanth
1
130
NoSQL?
gnumanth
2
260
Google's whitepaper
gnumanth
3
140
Python Intro
gnumanth
1
390
Other Decks in Programming
See All in Programming
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
140
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
大規模アプリにおけるXcode Previews実用化までの道のり
ikesyo
0
950
CSC305 Lecture 03
javiergs
PRO
0
220
CSC509 Lecture 02
javiergs
PRO
0
400
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
200
クラシルを支える技術と組織
rakutek
0
190
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
290
CSC509 Lecture 01
javiergs
PRO
1
430
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
320
CSC305 Lecture 04
javiergs
PRO
0
230
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Thoughts on Productivity
jonyablonski
70
4.8k
Speed Design
sergeychernyshev
32
1.1k
Music & Morning Musume
bryan
46
6.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
880
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
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