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
97
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
83
Harmony with ES6!
gnumanth
6
1.2k
Ants and Algorithm
gnumanth
1
110
NoSQL?
gnumanth
1
240
Google's whitepaper
gnumanth
3
130
Python Intro
gnumanth
1
380
Other Decks in Programming
See All in Programming
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
270
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
Swiftコードバトル必勝法
toshi0383
0
170
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Being A Developer After 40
akosma
84
590k
Why Our Code Smells
bkeepers
PRO
334
56k
Designing for Performance
lara
604
68k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Fireside Chat
paigeccino
31
2.9k
Documentation Writing (for coders)
carmenintech
65
4.3k
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