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
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
効率的な開発手段として VRTを活用する
ishkawa
0
140
NPOでのDevinの活用
codeforeveryone
0
840
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Hack Claude Code with Claude Code
choplin
4
2.1k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Scaling GitHub
holman
460
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
GraphQLとの向き合い方2022年版
quramy
49
14k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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