端端舝

WebComponents午
Polymer毛妏勻化心凶
笢𥱊硝珨
@y_nakazawa1220

赻撩畿賡
? Python + Django匹旦穴石失皿伉及田永弁巨件玉
嶱逃
? 亢奈日廿奪燴�
? 白伕件玄互賴忒(犒)
? 奶件弘伊旦支曰引仄斤丹ㄐ

仇木乩田奶氏元扎友ㄐ

WebComponents
? 赻煦匹疑五卅正弘互釬木月
? UI及戊件禾奈生件玄趙毛仄化婬瞳蚚匹五月
? 卅卞方曰晞瞳公丹ㄗ㜭匹五公丹??ㄘ

☆�⻌示正件★毛肮珨扔奶玄
匹妏中隙仄凶中
? 俋紝 HTML/CSS匹𤩸中化
? 示正件弁伉永弁摽及紱釬毛js匹𤩸中化
? ⺜墿卅戊奈玉毛𤩸仁仇午卞卅月

帊�
1. HTML Template
2. Shadow DOM
3. Custom Elements
4. HTML imports

公木冗木及篌心
1. HTML Template > 戊件禾奈生件玄趙允月�I燴
2. Shadow DOM > 1.及市皿本伙趙
3. Custom Elements > 1.毛妏蚚允月帊瞎心﹛﹛﹛﹛﹛﹛﹛(正弘及隅膽)
4. HTML imports > 1.毛網太堤允帊瞎心

youtube正弘
毛釬勻化心凶
ㄗ迡磊仄化心凶??ㄘ

HTML template
x-youtube.html及方丹卅Template蚚及HTML白央奶伙毛釬月
<template id="x-youtube-template">
<style type="text/css" media="screen">
iframe {
border: 0;
}
</style>
<iframe width="" height="" src=/slideshow/we-38493477/38493477/"http:/www.youtube.com/embed/" frameborder="0"
allowfullscreen></iframe>
</template>
<script type="text/javascript" src=※js/x-youtube.js"></script>

Shadow DOM
style及蕎敖趙
<template id="x-youtube-template">
<style type="text/css" media="screen">
iframe {
border: 0;
}
</style>
<iframe width="" height="" src=/slideshow/we-38493477/38493477/"http:/www.youtube.com/embed/" frameborder="0"
allowfullscreen></iframe>
</template>
<script type="text/javascript" src=※js/x-youtube.js"></script>

Custom Elements
// x-youtube 正弘毛釬月
var XYoutubeProtoType = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {}
}
}
# registerElement()匹Custom Element毛腎嶕允月
var XYoutube = document.registerElement('x-youtube', {prototype:
XYoutubeProtoType});

HTML imports
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="import" href="/x-youtube.html">
</head>
<body></body>
!
<x-youtube video-id="XXXXXXXX"></x-youtube>
<x-youtube video-id="YYYYYYYY"></x-youtube>
!
</html>

蛁砩萸
? Chrome 井 Chrome Canary匹
? chrome://flags卞失弁本旦仄化﹜☆�歠綅蚚唳及
它尼皮皿仿永玄白巧奈丞及辻夔毛衄�卞允月﹝★
毛衄�卞允月

What is a Polymer?
? Web Conponents毛婦氏分仿奶皮仿伉
(Polymer.js)
? Polyfill互皮仿它扒及帤扔禾奈玄毛娗勻化仁木月
? 暫卞Custom Elements互蚚砩今木化中月
? Template互釬木月Designer汁奈伙互丐月

Custom Elements I/O
http://customelements.io

Polymer Designer
http://www.polymer-project.org/tools/designer/

仇氏卅戊奈玉毛苂中化仁木月
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<polymer-element name="my-element">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
???
</style>
<core-toolbar id="core_toolbar">
<core-icon-button id="core_icon_button" icon="menu"></core-icon-button>
<div id="div" flex>Toolbar</div>
</core-toolbar>
</template>
<script>
Polymer('my-element', {
});
</script>
!

赻煦及白伕件玄珃中
ㄗ手午中賴忒ㄘ反眻月及井ㄐˋ

? 妏尹月戊件禾奈生件玄互�尹化仁木壬汜宴俶奻互曰
公丹
? 赻煦匹釬月煦卞反﹜切扎氏午價掛毛眚尹化卅中午支勻
天�仄中
? 引分伉白央伊件旦𡃤化切扎中仃卅中�﹝

仍ラ�丐曰互午丹
仍介中引仄凶ㄐ

端端舝

兜梗莉唬棗鳥梯棗紳梗紳喧莽午捩棗梭聆鳥梗娶毛妏勻化心凶

More Related Content

兜梗莉唬棗鳥梯棗紳梗紳喧莽午捩棗梭聆鳥梗娶毛妏勻化心凶