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
I/O ‘18で発表された Polymer の update に見る Web Componen...
Search
Kenichiro Kishida
May 19, 2018
Technology
0
230
I/O ‘18で発表された Polymer の update に見る Web Components の 過去/現在、そして未来/Jsfes-2018-summer
I/O ‘18で発表された Polymer の発表を5分のLTに圧縮して紹介します
Kenichiro Kishida
May 19, 2018
Tweet
Share
More Decks by Kenichiro Kishida
See All by Kenichiro Kishida
Code兄弟での CI/CDをいい感じにする方法 / phpstudy-2024-06
sizuhiko
0
190
Webアクセシビリティワークショップを社内でやってみた / phpconfuk-2024
sizuhiko
1
370
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
150
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
330
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
210
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
390
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.4k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
350
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
720
Other Decks in Technology
See All in Technology
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
190
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
Apache Spark もくもく会
taka_aki
0
140
Android Audio: Beyond Winning On It
atsushieno
0
3.4k
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
390
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
220
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
120
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
Featured
See All Featured
A better future with KSS
kneath
239
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Cult of Friendly URLs
andyhume
79
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Balancing Empowerment & Direction
lara
3
620
BBQ
matthewcrist
89
9.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The Invisible Side of Design
smashingmag
301
51k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Transcript
*0bͰൃද͞Εͨ 1PMZNFSͷVQEBUFʹݟΔ 8FC$PNQPOFOUTͷ աڈݱࡏɺͦͯ͠ະདྷ ॳՆͷ+BWB4DSJQUࡇ ,FOJDIJSP,JTIJEB !TJ[VIJLP
,FOJDIJSP,JTIJEB 5PLZP +"1"/ TJ[VIJLP!HNBJMDPN !TJ[VIJLP IUUQTHJUIVCDPNTJ[VIJLP IUUQCMPHPQFOUPLZPKQ
)JTUPSZ
2013 Polymer v0.0.20130711
2014 Polymer v0.5
2015 Polymer v1.0
2017 Polymer v2.0
2018
Polymer 3.0
w ࠷৽ͷόʔδϣϯ w όʔδϣϯ·ͩ·ͩݱ w (PPHMFͷ$ISPNFνʔϜ͕։ൃ w 1PMZpMMͰͳ͍ 1PMZNFS
8FC$PNQPOFOUT w4IBEPX%0. w$VTUPN&MFNFOUT w)5.-*NQPSUT w)5.-5FNQMBUFT https://github.com/w3c/webcomponents
6TF5IF1MBUGPSN
None
<iron-ajax auto url="https://www.googleapis.com/youtube/v3/search" params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}' handle-as="json"
last-response="{{ajaxResponse}}"></iron-ajax> <template is="dom-repeat" items="[[ajaxResponse.items]]"> <div class="horizontal-section"> <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2> <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image> <p>[[item.snippet.description]]</p> </div> </template> https://github.com/PolymerElements/iron-ajax
None
w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8 wΞϓϦέʔγϣϯ࡞ΕΔ wঢ়ଶཧͱ͔ίϯϙʔωϯτผͷϥ ΠϒϥϦ͕ඞཁ wϑϧελοΫͰͳ͍ w5ZQF4DSJQUαϙʔτ
.BUFSJBMDPNQPOFOUT w (PPHMF*0Ͱൃද͞ Εͨ৽͍͠σβΠϯͷ 8FC$PNQPOFOUT w IUUQTHJUIVCDPN NBUFSJBMDPNQPOFOUT NBUFSJBMDPNQPOFOUT XFCDPNQPOFOUT
w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT EFNPTJOEFYIUNM
-JU&MFNFOU w 1PMZNFSϕʔεͷ ܰྔ$VTUPN&MFNFOU ϕʔεΫϥε w IUUQTHJUIVCDPN 1PMZNFSMJUFMFNFOU <script src="node_modules/@webcomponents/webcomponents-bundle.js"></script>
<script type="module"> import {LitElement, html} from '@polymer/lit-element'; class MyElement extends LitElement { static get properties() { return { mood: String }} _render({mood}) { return html`<style> .mood { color: green; } </style> Web Components are <span class="mood">${mood}</span>!`; } } customElements.define('my-element', MyElement); </script> <my-element mood="happy"></my-element>
18"4UBSUFS,JU w 1PMZNFSͰ࡞ΒΕͨ 18"σϞΞϓϦ w IUUQTHJUIVCDPN 1PMZNFSQXB TUBSUFSLJU w IUUQTQXBTUBSUFS
LJUBQQTQPUDPN
https://polymer-jp.org/
11.28 2017 5.19 2018 ▶︎
Polymer Versions • v1.11.0 • v2.2.0 • v3 (Preview) •
124 releases • v1.11.3 • v2.6.0 • v3.0.2 • 140 releases ▶︎ Up
Polymer CLI Versions 1.5.7 1.6.0 ▶︎ Up
8IZVTF)5.-*NQPSU /FFEFE1PMZpMM #PXFS .BEFCZ1PMZNFS
/FFE1PMZpMM
UP&4.PEVMFT
#PXFSUPOQN
8FBSFGSJFOET https://custom-elements-everywhere.com/
ະདྷ
w$444IBEPX1BSUT https://tabatkins.github.io/specs/css-shadow-parts/ w$VTUPN&MFNFOU3FHJTUFST https://github.com/w3c/webcomponents/issues/716 w1BDLBHFOBNFNBQT https://github.com/domenic/package-name-maps w)5.-.PEVMFT https://github.com/w3c/webcomponents/issues/645 https://github.com/PolymerLabs/html-modules-toolkit w)5.-5FNQMBUF*OTUBOUJBUJPO
https://github.com/w3c/webcomponents/blob/gh-pages/ proposals/Template-Instantiation.md
WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp