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
120
NoSQL?
gnumanth
2
250
Google's whitepaper
gnumanth
3
140
Python Intro
gnumanth
1
390
Other Decks in Programming
See All in Programming
Hack Claude Code with Claude Code
choplin
3
1.1k
効率的な開発手段として VRTを活用する
ishkawa
0
130
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
160
Goで作る、開発・CI環境
sin392
0
230
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
3.4k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
500
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
910
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Code Review Best Practice
trishagee
69
18k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Automating Front-end Workflow
addyosmani
1370
200k
Agile that works and the tools we love
rasmusluckow
329
21k
For a Future-Friendly Web
brad_frost
179
9.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Building an army of robots
kneath
306
45k
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