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
220
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
180
Webアクセシビリティワークショップを社内でやってみた / phpconfuk-2024
sizuhiko
1
350
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
140
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
320
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
200
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
370
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.4k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
350
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
710
Other Decks in Technology
See All in Technology
GitHub Copilot の概要
tomokusaba
1
140
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
370
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
120
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
170
5min GuardDuty Extended Threat Detection EKS
takakuni
0
160
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
怖くない!はじめてのClaude Code
shinya337
0
240
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
290
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
900
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
310
Github Copilot エージェントモードで試してみた
ochtum
0
110
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Bash Introduction
62gerente
614
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
RailsConf 2023
tenderlove
30
1.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Facilitating Awesome Meetings
lara
54
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
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