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
100
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
87
Harmony with ES6!
gnumanth
6
1.2k
Ants and Algorithm
gnumanth
1
120
NoSQL?
gnumanth
1
240
Google's whitepaper
gnumanth
3
130
Python Intro
gnumanth
1
380
Other Decks in Programming
See All in Programming
時計仕掛けのCompose
mkeeda
1
280
CI改善もDatadogとともに
taumu
0
110
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
チームリードになって変わったこと
isaka1022
0
190
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Open source software: how to live long and go far
gaelvaroquaux
0
620
DROBEの生成AI活用事例 with AWS
ippey
0
130
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Featured
See All Featured
Music & Morning Musume
bryan
46
6.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Why Our Code Smells
bkeepers
PRO
335
57k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Six Lessons from altMBA
skipperchong
27
3.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
BBQ
matthewcrist
86
9.5k
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