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
コンテキストエンジニアリング Cursor編
kinopeee
1
730
rage against annotate_predecessor
junk0612
0
140
TanStack DB ~状態管理の新しい考え方~
bmthd
2
370
MLH State of the League: 2026 Season
theycallmeswift
0
200
私の後悔をAWS DMSで解決した話
hiramax
4
180
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
兎に角、コードレビュー
mitohato14
0
160
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
980
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.7k
Langfuseと歩む生成AI活用推進
licux
3
320
AIコーディングAgentとの向き合い方
eycjur
0
250
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Cult of Friendly URLs
andyhume
79
6.6k
Scaling GitHub
holman
463
140k
Done Done
chrislema
185
16k
How to Ace a Technical Interview
jacobian
279
23k
Optimizing for Happiness
mojombo
379
70k
RailsConf 2023
tenderlove
30
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
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