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
ErdMap: Thinking about a map for Rails applications
makicamel
1
1.1k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
140
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
390
Immutable ActiveRecord
megane42
0
120
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
240
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
790
Scaling your build logic
antalmonori
1
150
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
380
Moscow Python Meetup №97. Константин Крестников (Техлид команды GigaChain (SberDevices)). GigaChain: Новые инструменты для разработки агентов на примере агента техподдержки
moscowdjango
PRO
0
100
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
functionalなアプローチで動的要素を排除する
ryopeko
1
930
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
170
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Designing for Performance
lara
604
68k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Become a Pro
speakerdeck
PRO
26
5.1k
How GitHub (no longer) Works
holman
312
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
What's in a price? How to price your products and services
michaelherold
244
12k
Done Done
chrislema
182
16k
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