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
Namespace and Its Future
tagomoris
6
700
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
21
5.6k
Ruby Parser progress report 2025
yui_knk
1
430
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
220
OSS開発者という働き方
andpad
5
1.7k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
15
4.6k
Rancher と Terraform
fufuhu
2
240
機能追加とリーダー業務の類似性
rinchoku
2
1.2k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
720
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
490
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
280
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
A designer walks into a library…
pauljervisheath
207
24k
Building an army of robots
kneath
306
46k
Bash Introduction
62gerente
615
210k
Building Applications with DynamoDB
mza
96
6.6k
Rails Girls Zürich Keynote
gr2m
95
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Automating Front-end Workflow
addyosmani
1370
200k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
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