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
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
670
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
390
Bedrock で検索エージェントを再現しようとした話
ny7760
2
110
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
200
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
400
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
460
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
AWSで始める実践Dagster入門
kitagawaz
1
750
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
260
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Embracing the Ebb and Flow
colly
87
4.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
4 Signs Your Business is Dying
shpigford
184
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Designing Experiences People Love
moore
142
24k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Fireside Chat
paigeccino
39
3.6k
The Invisible Side of Design
smashingmag
301
51k
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