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
250
Google's whitepaper
gnumanth
3
140
Python Intro
gnumanth
1
390
Other Decks in Programming
See All in Programming
20250708_JAWS_opscdk
takuyay0ne
2
130
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
PicoRuby on Rails
makicamel
2
140
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
型で語るカタ
irof
0
700
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
効率的な開発手段として VRTを活用する
ishkawa
0
160
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
A better future with KSS
kneath
238
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Site-Speed That Sticks
csswizardry
10
700
A Modern Web Designer's Workflow
chriscoyier
695
190k
Git: the NoSQL Database
bkeepers
PRO
430
65k
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