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
『品質』という言葉が嫌いな理由
korimu
0
160
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
最近のVS Codeで気になるニュース 2025/01
74th
1
250
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Immutable ActiveRecord
megane42
0
130
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Rails アプリ地図考 Flush Cut
makicamel
1
110
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
It's Worth the Effort
3n
184
28k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Writing Fast Ruby
sferik
628
61k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Producing Creativity
orderedlist
PRO
343
39k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Gamification - CAS2011
davidbonilla
80
5.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
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